Gerador de Sombra CSS
Projetar efeitos de box-shadow e text-shadow multi-camada com pré-visualização ao vivo e presets
Sobre Gerador de Sombra CSS
Projete efeitos box-shadow e text-shadow multicamadas com pré-visualização ao vivo, predefinições e saída CSS pronta para produção — tudo no seu navegador.
Como usar Gerador de Sombra CSS
- 1Escolha entre os modos Box Shadow e Text Shadow.
- 2Ajuste as propriedades da sombra: deslocamento X/Y, desfoque, expansão (apenas box) e cor.
- 3Adicione múltiplas camadas de sombra para efeitos de profundidade — cada camada tem controles independentes.
- 4Ative 'Interno' para sombras internas (apenas box shadow).
- 5Experimente predefinições (Sutil, Médio, Pesado, Brilho Neon, Profundidade em camadas) ou crie a sua.
- 6Copie a saída CSS para seu projeto.
Dicas
- Sombras em camadas (3+ camadas com opacidade decrescente) criam os efeitos de profundidade mais realistas.
- Sombras Neon com cores brilhantes em fundos escuros criam efeitos visuais marcantes para CTAs.
- Use sombras sutis (1-4px de desfoque, baixa opacidade) para cards e inputs — sombras pesadas costumam parecer datadas.
Limites grátis vs pago
Grátis: camadas limitadas. Starter+: mais camadas de sombra.
Ferramentas relacionadas
Equipe OneKitToolsAtualizado 2.21.4