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.

Ferramentas de edição de texto:

• Adicionar Quebras de Linha Popular
• Adicionar Números de Linha ao Texto Popular
• Adicionar Prefixo e Sufixo ao Texto
• Gerador de E-mAIls com IA Novo
• Verificador de Gramática AI
• Parafraseador de IA Novo
• AI Adicionador de Pontuação
• Expansor de Frases com IA Novo
• Humanizador de Texto com IA Novo
• Gerador de Arte ASCII
• Quebra de Linha por Contagem de Caracteres
• Ferramenta de Cifra de César
• Embelezador CSS Novo
• Gerador de Box Shadow CSS Novo
• Gerador de Texto Estilizado
• Buscar e Substituir Texto
• Embelezador de HTML Novo
• Conversor de HTML para Markdown Novo
• Removedor de Caracteres Invisíveis
• Gerador de Texto Invisível Popular
• Minificador e Embelezador de JavaScript Novo
• Formatador e Validador de JSON Novo
• Limpador de Lista
• Calculadora de Diferença de Lista
• Letras Minúsculas ou Maiúsculas
• Editor de Markdown Novo
• Tradutor de Pig Latin Novo
• Verificador de Plágio Popular
• Remover acentos do texto Popular
• Remover Linhas Duplicadas
• Remover Linhas Vazias do Texto Popular
• Remover Espaços à Esquerda e à Direita do Texto
• Remover Quebras de Linha Popular
• Remover Números de Linha do Texto Popular
• Manter ou excluir linhas contendo uma sequência
• Ferramenta Online para Remover Pontuação Popular
• Remover espaços Popular
• Inverter Linha
• Inverter Texto
• Gerador de Marcação Schema Novo
• Gerador de Texto Pequeno ⁽ᶜᵒᵖʸ ⁿ ᵖᵃˢᵗᵉ⁾ Popular
• Gerador de Texto Tachado Novo
• Repetição de String
• Formatador de Texto Popular
• Repetição de Texto
• Conversor de Lista para SQL
• Conversor de Caixa de Título
• Gerador de Texto de Cabeça para Baixo
• Visualizador de Espaços em Branco Novo
• Formatador e Validador YAML Novo
• Gerador de Texto Zalgo Popular