Gerador CSS Box Shadow — Neumorfismo, Glassmorfismo e Tailwind

Gerador CSS Box Shadow — Neumorfismo, Glassmorfismo e Tailwind

Crie qualquer sombra CSS visualmente em segundos. Ajuste offset, blur, spread, cor e opacidade com sliders em tempo real — e copie como CSS puro, uma classe Tailwind ou variável CSS. Troque para o modo Neumorfismo para soft UI ou Glassmorfismo para efeito vidro fosco. Nenhum outro gerador de box shadow combina os três em um único URL.

O CSS gerado é pronto para produção. Funciona 100% no browser, sem instalação e sem cadastro.

Como Usar Este Gerador CSS Box Shadow

Gerar uma sombra leva três passos:

1. Ajuste os sliders — arraste Shift X, Shift Y, Blur, Spread e Opacidade para modelar a sombra. O preview atualiza em tempo real no elemento escolhido: card, botão, input ou círculo.
2. Escolha o modo ou preset — fique no modo Padrão para sombra customizada, mude para Neu para neumorfismo, para Glass para glassmorfismo, ou clique em qualquer preset da galeria para carregar um valor pronto.
3. Copie o resultado — clique no ícone de cópia ao lado de CSS, Tailwind ou Variável CSS para colar direto no projeto. Pressione Shift+Enter em qualquer parte da ferramenta para copiar o CSS instantaneamente.

Exemplos de Box Shadow

Caso limite — glow sem offset:

offsetX=0, offsetY=0, blur=20px → 0 0 20px rgba(59,130,246,.5)

Offset zero com blur alto produz brilho ambiente em vez de sombra direcional — ideal para botões, badges e efeitos neon.

Caso limite — spread negativo:

offsetY=4px, blur=12px, spread=-2px → 0 4px 12px -2px rgba(0,0,0,.15)

Spread negativo contrai a sombra para não ultrapassar as bordas do elemento — resultado mais natural.

Sintaxe do CSS box-shadow

box-shadow: [inset] offset-x offset-y blur-radius spread-radius cor;

/* Sombra única */
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);

/* Múltiplas sombras (a primeira fica por cima) */
box-shadow:
  0 1px 3px rgba(0,0,0,.12),
  0 1px 2px rgba(0,0,0,.24);

/* Sombra interna */
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);

O Que É Neumorfismo?

Neumorfismo (soft UI) cria um efeito 3D plástico usando duas sombras opostas: uma mais clara que o fundo (highlight) e uma mais escura (sombra de toque). O elemento e o fundo precisam ter a mesma cor base — caso contrário, o efeito quebra.

/* Fundo e elemento usam #e0e5ec */
box-shadow:
  -6px -6px 12px rgba(255, 255, 255, 0.8),
   6px  6px 12px rgba(163, 177, 198, 0.6);

O modo Neumorfismo desta ferramenta calcula as duas sombras automaticamente a partir da cor de fundo escolhida. Troque entre Plano, Pressionado (variante inset) e Côncavo.

O Que É Glassmorfismo?

Glassmorfismo cria efeito de vidro fosco com fundo semi-transparente, backdrop-filter blur e borda branca sutil. O efeito só é visível sobre fundo colorido ou imagem — em fundo branco sólido o efeito desaparece.

.glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
}

O modo Glassmorfismo renderiza o preview sobre um gradiente colorido para você ver o efeito em contexto real. O prefixo -webkit-backdrop-filter é incluído no export para compatibilidade com Safari.

Export para Tailwind CSS

Para valores customizados, use a sintaxe JIT: shadow-[10px_10px_20px_rgba(30,41,59,0.15)]. Adicione em theme.extend.boxShadow no tailwind.config.js para reutilização.

Erros Comuns com CSS Box Shadow

• Usar filter: drop-shadow no lugar de box-shadow: drop-shadow segue a forma visual real do elemento (incluindo transparências em PNG). box-shadow aplica à caixa retangular CSS. Use drop-shadow para ícones; box-shadow para cards e botões.
• Esquecer o prefixo -webkit-backdrop-filter: Safari exige. Sem ele, o efeito glassmorfismo some no iOS e macOS Safari.
• Animar box-shadow diretamente no hover: Isso dispara repaint a cada frame. Prefira animar opacity em um pseudo-elemento que já tenha a sombra aplicada.
• Neumorfismo com baixo contraste: O visual suave é atraente mas pode ser inacessível. Sempre verifique os índices WCAG para texto sobre fundo neumórfico.

Perguntas Frequentes

O que é a propriedade CSS box-shadow?

A propriedade box-shadow adiciona um ou mais efeitos de sombra ao redor da caixa CSS de um elemento. Cada sombra é definida por offset horizontal, offset vertical, raio de blur, raio de spread e cor. Múltiplas sombras são empilhadas separando os valores por vírgula — a primeira da lista fica por cima das demais.

Qual a diferença entre box-shadow e filter: drop-shadow?

box-shadow aplica à caixa retangular do elemento, incluindo áreas visualmente transparentes. filter: drop-shadow() segue a forma visual real do elemento — então em PNG com áreas transparentes, a sombra contorna os pixels visíveis. Use drop-shadow para ícones e formas irregulares; box-shadow para cards, botões e elementos retangulares.

Como adicionar múltiplas sombras em CSS?

Separe os valores de sombra por vírgulas: box-shadow: sombra1, sombra2. A primeira fica por cima. Empilhar uma sombra discreta e uma difusa cria profundidade mais realista — é a técnica por trás da elevação do Material Design.

Box-shadow afeta layout ou performance?

Sombras estáticas não afetam o layout (ao contrário de outline ou border) e têm impacto negligível de performance. Animar box-shadow no hover dispara repaint em cada frame. Para transições suaves, a técnica recomendada é animar opacity em um pseudo-elemento que já tenha a sombra destino aplicada.

Como criar efeito neon com CSS?

Use offsets zero, spread zero e blur alto com cor vívida: box-shadow: 0 0 20px rgba(99, 102, 241, 0.7). Empilhe dois glows — um curto e um difuso — para intensidade maior: 0 0 8px rgba(99,102,241,.9), 0 0 25px rgba(99,102,241,.4).

Recursos

• MDN — box-shadow — Referência completa da propriedade com tabela de compatibilidade de browsers.
• Material Design — Elevation — Especificação oficial do Google para sombras de elevação no Material Design 3.
• Can I Use — backdrop-filter — Tabela de suporte atualizada do backdrop-filter, necessário para glassmorfismo.