Início / CSS e cores / Gerador de sombra CSS
Gerador de sombra CSS
Sombras passam profundidade só quando se comportam como luz. Mova os controles, observe o cartão e copie o CSS. Um deslocamento vertical pequeno com desfoque largo e opacidade baixa é o que a maioria das interfaces quer.
Como usar
- Defina o deslocamento horizontal e vertical.
- Ajuste desfoque, extensão, cor e opacidade.
- Marque inset para sombra interna e copie a regra.
Exemplos
- 0 8px 24px −4px a 25% — a elevação de cartão moderna.
- 0 1px 2px a 15% — uma borda sutil para botões.
- Inset com pouco desfoque faz um campo parecer afundado.
Perguntas frequentes
Por que minhas sombras ficam cinzas e sem vida?
Porque preto puro com opacidade alta achata tudo. Puxe a sombra para o matiz do fundo e mantenha a opacidade baixa: uma sombra azul-escura sobre uma página quente parece muito mais natural que preto liso.
Posso empilhar várias sombras?
Sim, separando por vírgulas em uma única declaração. Duas ou três camadas com desfoques crescentes imitam a luz real muito melhor que uma sombra dura, e é assim que a maioria dos sistemas de design constrói elevação.
Ferramentas relacionadas
Atualizado: 2026-08-07