Gerador de box-shadow CSS
A declaração, não uma tela para arrastar.
Os exemplos substituem temporariamente os dados e as configurações. Você pode restaurar seu trabalho anterior.
0 caracteres
- sombras
- 1
Resultado
box-shadow: 0px 4px 12px rgba(0,0,0,.15);
Seus arquivos ficam no seu dispositivo
Esta ferramenta roda inteiramente no seu navegador. O que você cola é processado no seu dispositivo e nunca é enviado a um servidor, então é seguro usar com tokens, chaves e textos não publicados.
Exemplo
Exemplo: título branco legível sobre a foto do banner, com text-shadow em duas camadas
O banner da loja virtual tem uma foto clara de praia e, por cima, o título branco “Frete grátis acima de R$ 199”. Sem sombra, as letras somem na areia. Com “Propriedade” em text-shadow, entram duas linhas no campo, cada uma no formato “x y desfoque cor”.
- 0 1 2 rgba(0,0,0,.6): uma borda escura e curta, colada nas letras, que desenha o contorno.
- 0 4 16 rgba(0,0,0,.35): um halo largo e macio que escurece a foto em volta do título sem formar uma caixa.
- A página põe px em cada número, junta as duas sombras numa declaração só, uma embaixo da outra, e mostra “sombras: 2”.
- Se alguém digitar 0 4 16 4 rgba(0,0,0,.35), o 4 do espalhamento sai do CSS e um comentário embaixo explica por quê: text-shadow não tem espalhamento.
- Para o campo de busca parecer afundado, volte para box-shadow, apague as linhas, ajuste os controles (vertical 2, desfoque 6, espalhamento 0, cor rgba(0,0,0,.2)) e marque “Para dentro”.
| Digitado ou escolhido | Na declaração |
|---|---|
| 0 1 2 rgba(0,0,0,.6) | 0px 1px 2px rgba(0,0,0,.6) |
| 0 4 16 rgba(0,0,0,.35) | 0px 4px 16px rgba(0,0,0,.35) |
| 0 4 16 4 rgba(0,0,0,.35) em text-shadow | 0px 4px 16px rgba(0,0,0,.35), mais um comentário sobre o 4 retirado |
| Controles 2, 6, 0 e rgba(0,0,0,.2) com “Para dentro” | box-shadow: inset 0px 2px 6px rgba(0,0,0,.2); |
| Campo vazio, controles no padrão | box-shadow: 0px 4px 12px rgba(0,0,0,.15); |
text-shadow: 0px 1px 2px rgba(0,0,0,.6), 0px 4px 16px rgba(0,0,0,.35); — é só colar na regra do título. As letras continuam brancas, mas agora se leem tanto sobre a areia clara quanto sobre o céu.
Como funciona
- Use os controles para uma sombra só, ou digite uma por linha para várias.
- Uma linha é “x y desfoque espalhamento cor” — qualquer número omitido vale zero.
- Mude para text-shadow se o que recebe a sombra for texto.
- Copie a declaração.
Perguntas frequentes
- Por que eu ia querer mais de uma sombra?
- Porque uma só quase nunca fica certa. Uma sombra de verdade é uma borda escura apertada mais um halo largo e macio; empilhar duas ou três com desfoques e opacidades diferentes é o que faz um cartão parecer descolado da página em vez de contornado.
- O que o espalhamento faz?
- Aumenta ou encolhe a sombra antes do desfoque. Um espalhamento negativo a recolhe: é assim que se obtém uma sombra que fica embaixo do elemento sem vazar pelos lados.
- Por que o espalhamento do meu text-shadow é ignorado?
- Porque text-shadow não tem espalhamento: ele aceita só x, y, desfoque e cor, e o navegador que encontra um quarto comprimento descarta a declaração inteira, então nenhuma sombra aparece. A página tira esse número do CSS e avisa com uma nota logo abaixo.
- O que é “para dentro”?
- Desenha a sombra dentro da caixa em vez de fora, que é como se faz algo parecer afundado. Vale só para box-shadow.
- Onde fica o deslocamento horizontal?
- Os controles mexem só no deslocamento vertical, e o x sai 0. Para uma sombra deslocada para o lado, digite a linha: 4 4 0 rgba(0,0,0,.25) vira 4px 4px 0px rgba(0,0,0,.25), uma sombra dura na diagonal, típica de botão com visual retrô.
- “Para dentro” vale para todas as sombras?
- Vale. Marcado, ele põe inset na frente de cada sombra da declaração, inclusive das linhas que você digitou. Para ter uma sombra de dentro e outra de fora no mesmo elemento, deixe desmarcado e comece só a linha da sombra interna com inset, como “inset 0 2 6 rgba(0,0,0,.2)”.
- Alguma coisa é enviada para um servidor?
- Não. Roda no navegador, então o que você digitar fica no seu computador.