# Crie sombras CSS visualmente em vez de adivinhar valores
Ajustar box-shadow manualmente é tedioso. Este gerador visual permite empilhar múltiplas sombras, visualizá-las ao vivo e copiar CSS pronto para produção. 5 Camadas de sombra por elemento
Ao vivo Pré-visualização a cada mudança
5 Presets rápidos
# Empilhe múltiplas sombras para profundidade realista
Sombras reais raramente são um blur uniforme. Empilhar uma sombra apertada perto do elemento com uma mais suave e ampla cria profundidade natural. Use + para adicionar camadas.# Compreender cada controlo
| Controle | Valor CSS | Efeito |
|---|---|---|
| Offset X | 1º comprimento | Deslocamento horizontal. |
| Offset Y | 2º comprimento | Deslocamento vertical. |
| Desfoque | 3º comprimento | Raio de blur. |
| Expansão | 4º comprimento | Expande ou encolhe a sombra. |
| Cor e Opacidade | rgba() | Cor da sombra com opacidade independente. |
| Interno | inset | Sombra dentro da borda do elemento. |
Use uma grelha de fundo discreta
A pré-visualização mostra uma grelha de pontos para revelar a extensão da sombra. Use um spread negativo para a manter mais próxima do elemento.Workflow recomendado
Comece com um preset.
Adicione camadas para profundidade realista.
Use spread negativo para efeito de card flutuante.
Copie o CSS gerado e cole.