Gerador de Box Shadow
O gerador de box-shadow cria uma sombra CSS com controles deslizantes para deslocamento X e Y, desfoque, expansão, cor, opacidade e inset, além de predefinições do Material Design e do Tailwind, e gera o CSS exato.
Sobre esta ferramenta
O gerador de box-shadow cria uma sombra CSS com controles deslizantes para deslocamento X e Y, desfoque, expansão, cor, opacidade e inset, além de predefinições do Material Design e do Tailwind, e gera o CSS exato.
Como usar
- Comece com uma predefinição ou mantenha Personalizado.
- Ajuste o deslocamento X/Y, o desfoque, a expansão e a opacidade.
- Escolha a cor da sombra e marque Inset para uma sombra interna.
- Clique em Copiar CSS para colar a regra box-shadow.
Bom saber
- A sintaxe do box-shadow é: [inset] offset-x offset-y blur-radius spread-radius color.
- Um raio de desfoque maior suaviza a borda; a expansão faz a sombra crescer ou encolher antes do desfoque.
- Sombras escuras de baixa opacidade (cerca de 10–25%) parecem mais naturais do que preto sólido.
- É possível sobrepor várias sombras separando-as com vírgulas.
- A palavra-chave inset desenha a sombra dentro da borda do elemento.
Funciona inteiramente no seu navegador — nada do que você digita é enviado ou armazenado.
Perguntas frequentes
Como adiciono uma sombra a uma div em CSS?
Use a propriedade box-shadow, por exemplo box-shadow: 0 4px 12px 0 rgba(0,0,0,0.2); esta ferramenta escreve o valor para você.
Qual a diferença entre blur e spread?
O blur controla o quão suave é a borda da sombra. O spread aumenta ou diminui o tamanho da sombra antes de o desfoque ser aplicado.
Como faço uma sombra interna?
Adicione a palavra-chave inset no início do valor, ou marque Inset na ferramenta.
Posso usar várias box-shadows?
Sim. Separe as sombras com vírgulas; sombras em camadas, como as predefinições do Material e do Tailwind, parecem mais realistas.