Gerador CSS Box Shadow — Neumorfismo, Glassmorfismo e Tailwind
Gerador CSS box shadow grátis com preview em tempo real. Crie sombras, efeitos neumorfismo e glassmorfismo. Exporte para CSS, Tailwind ou variáveis CSS.
Atualizado em maio de 2026
box-shadow: 10px 10px 20px 0px rgba(30, 41, 59, 0.15);
shadow-xl
--shadow: 10px 10px 20px 0px rgba(30, 41, 59, 0.15);
Shift+Enter copia o CSS
Como usar
Sliders visuais, três formatos de saída
1. Ajuste os sliders
Shift X, Shift Y, Blur, Spread e Opacidade — o preview atualiza em tempo real.
2. Escolha o modo ou preset
Padrão, Neumorfismo, Glassmorfismo — ou clique num preset pronto da galeria.
3. Copie CSS, Tailwind ou variável
`Shift+Enter` copia o CSS instantaneamente de qualquer parte da ferramenta.
O que esta ferramenta faz
Três estilos num único gerador
Neumorfismo automático
Calcula as duas sombras opostas (highlight + toque) a partir da cor de fundo escolhida.
Glassmorfismo em contexto
Renderiza o preview sobre um gradiente colorido, incluindo o prefixo -webkit- para Safari.
Exportação tripla
CSS puro, classe Tailwind ou CSS custom property — copie o formato que seu projeto usa.
Presets Material Design
Elevações prontas, além de sombras iOS, cards sutis e brilhos neon.
Preview em 4 tipos de elemento
Alterne entre card, botão, input e círculo para ver a sombra aplicada em formas diferentes, com fundo do preview claro ou escuro.
Biblioteca com 19 presets em 7 categorias
Abra a galeria completa num modal e filtre visualmente por categoria — Material, iOS, Cards, Buttons, Glow e Inset.
Exemplos de box-shadow
Quando você vai usar isso
Os cenários mais comuns entre quem usa a ferramenta
Elevação estilo Material Design
Empilhe uma sombra discreta e uma difusa para profundidade realista.
Efeito neon em botões e badges
Offset zero com blur alto produz brilho ambiente em vez de sombra direcional.
Soft UI (neumorfismo)
Cards e botões com efeito 3D plástico — troque entre Plano, Pressionado e Côncavo.
Cards de vidro fosco
Glassmorfismo sobre fundo colorido ou imagem, com fallback correto para Safari.
Comparar a mesma sombra em elementos diferentes
Teste card, botão, input e círculo lado a lado antes de decidir qual profundidade combina melhor com o seu design.
Validar a sombra em dark mode
Alterne o preview para fundo escuro e confirme que a sombra continua visível antes de shippar a interface.
Erros comuns
Usar box-shadow em vez de drop-shadow para ícones
box-shadow aplica à caixa retangular; drop-shadow segue a forma visual real, incluindo PNG transparente.
Esquecer o prefixo -webkit-backdrop-filter
Sem ele, o efeito glassmorfismo desaparece no iOS e macOS Safari.
Animar box-shadow diretamente no hover
Dispara repaint a cada frame — anime opacity num pseudo-elemento com a sombra já aplicada.
Neumorfismo com baixo contraste
O visual suave do soft UI é atraente mas pode ficar ilegível. Sempre confira o contraste do texto sobre o fundo neumórfico contra os índices WCAG antes de publicar.
Editar à mão o valor arbitrário do Tailwind
Classes shadow-[...] exigem underscore no lugar de espaço em cada valor. Copie sempre pelo botão de cópia — editar manualmente quebra a sintaxe JIT do Tailwind.
Por que usar esta ferramenta
Nenhum outro gerador combina sombra padrão, neumorfismo e glassmorfismo no mesmo lugar — o modo Neumorfismo calcula as duas sombras automaticamente, algo que exigiria cálculo manual em outros geradores.
O CSS gerado é pronto para produção, com os prefixos de compatibilidade (como -webkit-backdrop-filter) já incluídos.
Você testa a mesma sombra em card, botão, input e círculo, com fundo claro ou escuro, antes de decidir qual profundidade funciona — tudo no navegador, sem instalar nada e sem criar conta.
box-shadow vs. filter: drop-shadow
Duas formas de sombrear, propósitos diferentes
Perguntas frequentes
Adiciona um ou mais efeitos de sombra ao redor da caixa de um elemento — offset horizontal, vertical, blur, spread e cor. Múltiplas sombras se empilham separadas por vírgula.
Referências
Ferramentas Relacionadas
- Verificador de Contraste de Cores Design Verificador de contraste de cores grátis — verifique conformidade WCAG 2.2 AA e AAA instantaneamente. Preview ao vivo, simulação de daltonismo e sugestões...
- Conversor de Cores Design Converta cores entre HEX, RGB, HSL e CMYK instantaneamente. Ferramenta gratuita com seletor de cores, verificador de contraste WCAG e gerador de paletas.
- Gerador de Paleta de Cores Design Gere paletas de cores harmoniosas a partir de qualquer cor base. Escolha harmonia Análoga, Complementar, Triádica ou Tetrádica — exporte como CSS variables...
- Gerador de Paleta de Cores por Imagem Design Extraia paletas de cores de qualquer imagem — obtenha códigos HEX, RGB, HSL e exporte como CSS variables, Tailwind, JSON ou PNG. 100% no browser, sem upload.
- Gerador CSS Flexbox Design Gerador CSS Flexbox grátis: preview ao vivo, saída Tailwind + CSS simultânea, 10 presets prontos, avisos contextuais e exportação React/JSX. Sem cadastro.
