Gerador de box-shadow CSS – Sombras em camadas com prévia
Crie sombras suaves, duras, em camadas ou internas com controles deslizantes e prévia ao vivo, e copie um box-shadow limpo. Empilhe até seis camadas para uma profundidade realista.
Mova os controles de deslocamento horizontal e vertical, desfoque, expansão, cor e opacidade: a prévia e o CSS mudam na hora. Clique em + para outra camada, marque “inset” para sombra interna ou escolha um modelo como Fluida (camadas) ou Neumorfismo. Copie a linha box-shadow para a sua folha de estilos.
Como usar: Gerador de box-shadow CSS
- Escolha um modelo ou comece com a sombra suave.
- Ajuste deslocamento, desfoque, expansão e opacidade.
- Adicione camadas com + para uma profundidade mais suave.
- Mude o fundo, a cor da caixa e o arredondamento.
- Copie o CSS e cole na sua folha de estilos.
A sintaxe do box-shadow
Uma sombra é escrita como `box-shadow: x y desfoque expansão cor`, com a palavra `inset` opcional no início. Várias sombras são separadas por vírgulas e pintadas da primeira (por cima) até a última.
| Valor | O que faz |
|---|---|
| Deslocamento x / y | Move a sombra para a direita/baixo (negativo: esquerda/cima) |
| Desfoque | Suaviza a borda; 0 gera sombra dura |
| Expansão | Aumenta ou diminui a sombra antes do desfoque |
| Cor | Em geral preto ou um tom escuro com pouca opacidade |
| inset | Desenha a sombra dentro do elemento |
Por que sombras em camadas ficam melhores
Objetos reais projetam sombras nítidas perto e difusas longe. Uma única sombra grande e borrada costuma parecer chapada. Empilhar várias sombras que dobram o deslocamento e o desfoque — 1, 2, 4, 8 e 16 px com pouca opacidade — cria a profundidade suave e natural dos design systems modernos. O modelo “Fluida (camadas)” faz exatamente isso.
Dicas para sombras bonitas
- Mantenha a opacidade baixa: 5–20 % de preto basta em fundos claros.
- Use expansão negativa com desfoque maior para elementos que devem “flutuar”.
- Tinja a sombra com a cor do fundo em vez de preto puro para um visual mais suave.
- Em fundos escuros as sombras quase não aparecem; use superfícies mais claras ou bordas.
- Para efeitos de hover, anime `transform` em vez da sombra.
Neumorfismo e sombras internas
O neumorfismo combina uma sombra clara no canto superior esquerdo e uma escura no inferior direito num elemento da mesma cor do fundo, como se saísse da superfície. Chama atenção, mas tem pouco contraste, então evite em botões importantes. Sombras internas funcionam bem em campos de formulário e estados pressionados.
Ferramentas CSS relacionadas
Arredonde cantos com o Gerador de border-radius, crie fundos com o Gerador de gradiente CSS, monte painéis de vidro com o Gerador de glassmorphism e reduza a folha de estilos com o Minificador e formatador de CSS. Tudo roda no navegador.
Você também pode gostar destas ferramentas grátis: Formatador JSON, Gerador de senha e Testador de regex.
Perguntas frequentes
Como coloco sombra numa div com CSS?
Use box-shadow, por exemplo box-shadow: 0 10px 30px -5px rgba(0,0,0,.2). Copie qualquer sombra deste gerador.
Posso usar mais de uma sombra?
Sim. Separe-as com vírgulas. O gerador permite empilhar até seis camadas.
O que faz a expansão (spread)?
Aumenta (positiva) ou diminui (negativa) a sombra antes de aplicar o desfoque.
Como faço uma sombra interna?
Adicione a palavra inset ou marque “Sombra interna” no gerador.
O box-shadow afeta o layout?
Não. Sombras não ocupam espaço nem movem outros elementos.
Última atualização: