Como funciona o box-shadow
A propriedade CSS box-shadow adiciona sombras a elementos, seguindo a sintaxe box-shadow: X Y blur spread cor;. Ajustando cada parâmetro visualmente, esta ferramenta gera o código exato para o efeito desejado.
O que cada parâmetro faz
| Parâmetro | Função |
|---|---|
| Deslocamento X | Move a sombra para a direita (positivo) ou esquerda (negativo) |
| Deslocamento Y | Move a sombra para baixo (positivo) ou para cima (negativo) |
| Desfoque (blur) | Quanto maior, mais suave e espalhada fica a borda da sombra |
| Espalhamento (spread) | Aumenta ou diminui o tamanho da sombra em todas as direções |
| Inset | Quando marcado, a sombra fica por dentro do elemento em vez de por fora |
Dica de design
Sombras suaves com blur alto e cor com baixa opacidade (como rgba(0,0,0,0.15)) costumam parecer mais modernas do que sombras duras e escuras, sendo muito usadas em cards e botões de interfaces atuais.
Perguntas frequentes
O que é o parâmetro "spread" (espalhamento)?
Controla o tamanho da sombra em todas as direções, independente do desfoque — valores positivos expandem a sombra, negativos a encolhem.
Qual a diferença entre sombra normal e "inset"?
A sombra normal aparece por fora do elemento, como se ele estivesse flutuando; a inset aparece por dentro, criando um efeito de profundidade ou relevo.
Posso usar cores com transparência?
Sim, use o formato rgba(r, g, b, alpha), como rgba(0,0,0,0.25), para controlar a opacidade da sombra.
É possível ter mais de uma sombra no mesmo elemento?
Sim — no CSS, você pode separar múltiplas definições de box-shadow por vírgula, embora esta ferramenta gere uma sombra por vez.