Gerador de Box Shadow CSS

Gerador de Box Shadow CSS

O Gerador de Box Shadow CSS permite que você crie visualmente efeitos de box-shadow e copie instantaneamente o CSS pronto para produção. Empilhe múltiplas camadas de sombra, escolha entre predefinições selecionadas inspiradas em Material Design, Tailwind CSS e Neumorphism, ou arraste diretamente na visualização para posicionar sua sombra. Tudo funciona no seu navegador — seu código nunca sai da página.

Como Usar o Gerador de Box Shadow CSS

1. Ajuste os controles de sombra — Use os controles deslizantes para definir o deslocamento horizontal (X), deslocamento vertical (Y), raio de desfoque e raio de propagação. Você também pode arrastar diretamente na área de visualização para reposicionar a sombra intuitivamente.
2. Escolha cor e opacidade — Escolha uma cor de sombra com o seletor de cores e ajuste a transparência com o controle deslizante de opacidade. A visualização é atualizada em tempo real.
3. Adicione várias camadas ou predefinições — Clique em + Adicionar Camada de Sombra para empilhar sombras para uma profundidade realista. Ou selecione uma predefinição selecionada (Material, Tailwind, Neumorphism, etc.) para começar com um design comprovado.
4. Copie o CSS — Clique em Copiar para pegar o código box-shadow gerado e colá-lo diretamente em sua folha de estilo.

Entendendo a Sintaxe do box-shadow

Dicas para Sombras Profissionais

• Camadas de múltiplas sombras — Objetos do mundo real projetam sombras complexas. Usar 2 a 3 camadas (uma camada ambiente suave + uma camada de luz principal mais nítida) produz resultados muito mais realistas do que uma única sombra.
• Use baixa opacidade — Sombras com 8-20% de opacidade parecem naturais. Evite sombras pretas com alta opacidade, que podem parecer pesadas e datadas.
• Combine a direção da luz — Mantenha os deslocamentos de sombra consistentes em toda a sua interface para simular uma única fonte de luz. Sombras inconsistentes quebram a ilusão visual.
• Sombras coloridas — Em vez de preto, tente usar um tom mais escuro da cor de fundo do elemento para um visual mais coeso e moderno.
• Propagação negativa — Um valor de propagação negativo encolhe a sombra para que fique menor que o elemento, criando uma sombra de contato sutil que fundamenta os elementos sem bordas visíveis.

Estilos de Sombra Populares Explicados

• Material Design Elevation — Usa duas camadas de sombra: uma sombra ambiente mais suave e uma sombra principal mais nítida. Diferentes níveis de elevação (1-5) aumentam o deslocamento e o desfoque progressivamente.
• Utilidades Tailwind CSS — O Tailwind fornece classes shadow, shadow-md, shadow-lg, shadow-xl e shadow-2xl, cada uma usando sombras de duas camadas otimizadas para casos de uso comuns de cards e modais.
• Neumorphism — Cria um efeito de plástico extrudado suave usando duas sombras opostas (uma clara, uma escura). Funciona melhor em fundos cinza claro onde ambas as sombras são visíveis.
• Glassmorphism — Combina uma sombra sutil com o desfoque do backdrop-filter e fundos semitransparentes. A sombra adiciona profundidade abaixo do efeito de vidro fosco.

Perguntas Frequentes

O que é a propriedade CSS box-shadow?

A propriedade CSS box-shadow adiciona efeitos de sombra ao redor do quadro de um elemento. Ela aceita valores para deslocamento horizontal, deslocamento vertical, raio de desfoque, raio de propagação e cor. Múltiplas sombras podem ser separadas por vírgulas para criar efeitos de profundidade em camadas.

Como criar várias sombras de caixa no CSS?

Várias sombras de caixa são criadas separando cada definição de sombra por vírgula. Por exemplo: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1). Cada sombra é renderizada em cima da anterior, com a primeira sombra aparecendo no topo.

Qual é a diferença entre box-shadow e drop-shadow?

box-shadow aplica sombra à caixa retangular de um elemento, enquanto filter: drop-shadow() segue a forma real, incluindo áreas transparentes. box-shadow suporta raio de propagação e modo inset, que drop-shadow não suporta. Para elementos retangulares padrão, box-shadow é mais comumente usado e tem melhor desempenho.

O que é uma sombra de caixa interna (inset)?

Uma sombra de caixa interna (inset) aparece dentro do elemento em vez de fora. Ela é criada adicionando a palavra-chave inset antes dos valores da sombra. Sombras internas são comumente usadas para efeitos de botões pressionados, estilização de campos de entrada e criação de aparências recuadas ou gravadas.

Quais são bons valores de box-shadow para um efeito de card sutil?

Uma sombra de card sutil popular usa duas camadas: 0 1px 3px rgba(0,0,0,0.12) para a sombra próxima e 0 1px 2px rgba(0,0,0,0.24) para definição. O Tailwind CSS usa 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1) para seu utilitário de sombra padrão.