Gerador de Box Shadow CSS Online
Ajuste os controles abaixo e veja a sombra aplicada em tempo real. Copie o código box-shadow pronto para usar no seu projeto.
O que é box-shadow no CSS?
A propriedade box-shadow adiciona uma ou mais sombras ao redor de um elemento HTML. É amplamente usada para dar profundidade, destacar cartões (cards), botões e modais, criando uma interface com aparência de camadas (material design).
Sintaxe:
box-shadow: offset-x offset-y blur spread cor;| Valor | O que faz |
|---|---|
offset-x | Deslocamento horizontal (positivo = direita) |
offset-y | Deslocamento vertical (positivo = baixo) |
blur | Raio de desfoque — quanto maior, mais suave |
spread | Expansão da sombra (positivo aumenta, negativo encolhe) |
cor | Cor da sombra, geralmente com transparência (rgba) |
inset | Torna a sombra interna em vez de externa |
Exemplo:
box-shadow: 6px 6px 12px 0px rgba(0, 0, 0, 0.3);Sombra interna (inset)
Adicionando a palavra-chave inset, a sombra é desenhada dentro do elemento, criando um efeito de profundidade afundada — útil para campos de formulário, botões pressionados e elementos “rebaixados”.
Múltiplas sombras
Você pode aplicar várias sombras separando-as por vírgula. Isso permite efeitos mais ricos e realistas:
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.12),
0 1px 2px rgba(0, 0, 0, 0.24);Dicas de uso
- Use opacidade baixa (0.1 a 0.3) e preto para sombras sutis e naturais.
- Sombras com
offset-ypositivo e blur médio simulam luz vindo de cima. - Evite sombras muito escuras ou com deslocamentos grandes — costumam parecer artificiais.
Perguntas frequentes
Qual a diferença entre blur e spread?
O blur controla o quão difusa (borrada) a sombra fica nas bordas. O spread aumenta ou diminui o tamanho total da sombra antes do desfoque ser aplicado.
Como deixar a sombra colorida?
Escolha uma cor diferente de preto no seletor de cor. Sombras coloridas com baixa opacidade combinam bem com botões e elementos de marca.
Posso usar essa sombra em qualquer elemento?
Sim. A propriedade box-shadow funciona em praticamente qualquer elemento de bloco ou inline-block, como div, button, img e section.
A sombra afeta o tamanho do elemento?
Não. A box-shadow é puramente visual e não ocupa espaço no layout, diferente da border.