Gerador de Box Shadow
Empilhe até 6 camadas de sombra, ajuste cada uma independentemente e copie código CSS ou Tailwind limpo com um clique.
Como usar o gerador de Box Shadow
- Clique em «Adicionar camada» para empilhar até 6 sombras — selecione qualquer camada na lista para editá-la.
- Ajuste o deslocamento X/Y para mover a sombra, depois o desfoque para suavidade e a expansão para o tamanho.
- Escolha a cor e a opacidade da sombra; ative «Sombra interna» para efeitos de profundidade interna.
- Estilize a caixa de demonstração (cor, fundo, raio dos cantos) para combinar com seu componente real.
- Copie o resultado na aba CSS, ou mude para a aba Tailwind para uma classe utilitária.
Sobre este gerador de Box Shadow
A propriedade CSS box-shadow aceita uma lista de sombras separadas por vírgulas, cada uma com deslocamentos horizontal e vertical, raio de desfoque, raio de expansão, cor e uma palavra-chave inset opcional. Escrever sombras multicamadas à mão é tedioso: pequenas mudanças em um valor podem alterar drasticamente o resultado. Este gerador dá a cada camada seus próprios controles e mostra o efeito combinado em tempo real.
Use os presets como pontos de partida — de elevações «Suaves» sutis a profundidade em camadas estilo Material, sombras retrô duras de «Borda» e efeitos brilhantes de «Neon». Valores negativos de expansão são ótimos para sombras naturais e fotorrealistas. O CSS gerado funciona em todos os navegadores modernos, e a saída Tailwind usa sintaxe de valor arbitrário compatível com Tailwind CSS v3+.
FAQ de Box Shadow
Como crio um box-shadow multicamadas?
Clique em «Adicionar camada» para empilhar sombras. Cada camada tem seu próprio deslocamento, desfoque, expansão, cor, opacidade e configuração inset. A saída CSS junta todas as camadas com vírgulas automaticamente, e você pode reordenar as camadas com os botões de seta — a primeira camada é renderizada por cima.
O que faz o valor de expansão (spread) no box-shadow?
A expansão amplia (positiva) ou encolhe (negativa) a sombra antes do desfoque. Expansão positiva torna a sombra maior que o elemento — útil para bordas e brilhos neon. Expansão negativa puxa a sombra para dentro, o que combinado com um desfoque grande cria uma profundidade suave e natural.
Como faço uma sombra interna (inset)?
Ative o interruptor «Sombra interna» em qualquer camada. Sombras inset são renderizadas dentro do elemento, criando efeitos de pressão ou relevo. Você pode até misturar camadas inset e normais numa única declaração box-shadow.
A classe Tailwind gerada é válida?
Sim. A saída Tailwind usa sintaxe de valor arbitrário como shadow-[0_8px_24px_-6px_rgba(30,27,75,0.35)], suportada pelo Tailwind CSS v3 e posteriores (incluindo o motor v4) sem configuração.
Por que minha sombra parece diferente na minha própria página?
Sombras são afetadas pelo tamanho do elemento, border-radius e pelo fundo atrás. Combine a cor da caixa de demonstração, o raio dos cantos e o fundo com seu componente real para uma pré-visualização precisa.