Gerador de CSS box-shadow
Arraste os controles ou escolha uma predefinição — veja a sombra em um cartão ao vivo e copie o CSS box-shadow com um clique.
Predefinições
Camadas
0px
8px
24px
-8px
#000000
15%
Como usar
- Uma sombra suave já está no cartão — arraste qualquer controle (deslocamento X/Y, desfoque, propagação), escolha uma cor e opacidade, ou marque Inset para uma sombra interna. Tudo é atualizado ao vivo, sem botão para pressionar.
- Clique em um chip de predefinição (Flutuação suave, Elevação forte, Interna, Brilho neon, Dupla, Neumorfismo) para carregar um visual pronto na hora.
- Adicione mais camadas com “+” para empilhar sombras; cada camada é editada independentemente. Copie a declaração box-shadow completa com um clique.
Exemplo
Predefinição
Flutuação suave
CSS box-shadow
box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.15);
Copie direto para qualquer seletor, por exemplo .card { box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.15); }. A predefinição “Dupla” gera duas sombras separadas por vírgula; “Neumorfismo” precisa de um fundo claro para ser percebido.
Escopo, limites e dúvidas comuns
- Apenas box-shadow: sem filtro drop-shadow(), sem text-shadow, e o CSS não tem sombras em gradiente — isso está fora do escopo.
- A cor vem do seletor mais um controle de opacidade; não analisamos strings de cor CSS coladas, então não há nada para digitar errado ou interpretar mal.
- O neumorfismo depende de uma superfície clara — em fundos muito escuros seu efeito pode ficar invisível. Isso é uma propriedade do estilo, não um bug.
- Nada é salvo ou compartilhado com um parâmetro no link: recarregue e você volta à Flutuação suave padrão. Tudo roda no seu navegador.
Ferramentas relacionadas
Quando você precisa ir além com cores ou sombras.