O gerador de sombra (box-shadow) permite ajustar efeitos de sombra em tempo real com controles deslizantes, suporta várias sombras sobrepostas e oferece 8 predefinições selecionadas, incluindo Material, Neumorphism e Neon — depois copie o CSS na hora.
Recursos
- 5 parâmetros ajustáveis: deslocamento X (esquerda/direita), deslocamento Y (cima/baixo), raio de desfoque (suavidade da borda), raio de espalhamento (tamanho geral) e opacidade — cada um com seu próprio controle deslizante.
- Sombras em várias camadas: clique em “Adicionar camada de sombra” para empilhar várias sombras — designs reais costumam usar 2–3 camadas para uma profundidade mais natural (como no Material Design).
- Sombra interna (Inset): ative Inset para virar a sombra para dentro do elemento — ótimo para efeito de botão pressionado ou cartões rebaixados.
- 3 fundos de prévia: alterne entre fundos Claro, Escuro e Gradiente para verificar como a sombra fica em diferentes superfícies.
- 8 predefinições selecionadas: Flat, Subtle, Card, Material (3 camadas), Dramatic, Neon Blue, Neumorphism e Inset.
- Cópia de CSS com um clique: obtenha a sintaxe completa box-shadow: ...; pronta para colar em qualquer arquivo CSS, propriedade style do Tailwind ou ferramenta de design.
Como usar?
- Use os controles deslizantes para ajustar deslocamento, desfoque, espalhamento e opacidade — a prévia atualiza na hora.
- Para uma profundidade mais natural, adicione camadas de sombra extras ou ative Inset para uma sombra interna.
