Gerador de sombra

Empilhe várias camadas de box-shadow ou filter:drop-shadow com prévia ao vivo

Empilhe várias camadas de sombra para criar efeitos de profundidade. Use box-shadow para elementos sólidos (suporta inset e spread) ou filter:drop-shadow para formas transparentes (PNG, SVG). A prévia ao vivo atualiza conforme você ajusta cada camada.

box-shadow

drop-shadow

Camadas de sombra

Desfoque

Expansão

inset

Prévia

CSS

box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.15);

Como usar

Escolha entre os modos box-shadow e drop-shadow usando o controle segmentado.
Ajuste deslocamento X, deslocamento Y, desfoque, spread e cor da primeira camada de sombra.
Clique em '+ Camada' para empilhar múltiplas sombras e configurar cada uma independentemente.
Veja o efeito combinado na visualização de sombra ativa da caixa.
Copie a declaração CSS gerada da seção de saída e cole em seu stylesheet.

Exemplos

Definir offsetY=4, blur=12, spread=0, color=rgba(0,0,0,0.15) produz uma sombra de cartão padrão: box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.15).
Adicionar uma segunda camada com offsetY=1, blur=3 e color=rgba(0,0,0,0.08) cria um efeito de profundidade em camadas popular na UI de estilo material.