Gerador de Box Shadow CSS
Ajuste visualmente parâmetros de box-shadow, visualize o efeito em tempo real e copie o código CSS gerado. Grátis, direto no navegador.
Todo o processamento acontece no seu navegador — nada é enviado ao servidor
水平偏移4px
垂直偏移4px
模糊半径12px
扩展半径0px
透明度20%
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.20);Perguntas frequentes
O CSS gerado serve para produção?
Sim. O código segue padrões W3C e funciona em todos os navegadores modernos (IE9+). Cole direto em .css, style inline ou styled-components.
Suporta múltiplas sombras empilhadas?
Sim. Empilhe camadas ilimitadas (separadas por vírgula), cada uma com cor, desfoque, expansão, offset X/Y e inset independentes — perfeito para neumorfismo, glassmorphism ou botões com profundidade.
Sombras ficam apagadas no modo escuro, o que fazer?
Sombras pretas perdem contraste em fundos escuros. Tente sombras brancas com baixa opacidade (ex. `rgba(255,255,255,0.1)`) para um brilho sutil, ou cores da marca dessaturadas para manter profundidade.