Gerador de box-shadow CSS
A declaração, não uma tela para arrastar.
- 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.
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. A página avisa quando você digitou um quarto número, em vez de descartá-lo em silêncio como o navegador faz.
- 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.
- Alguma coisa é enviada para um servidor?
- Não. Roda no navegador, então o que você digitar fica no seu computador.