Gerador de Sombras

Gerador CSS Box Shadow - Criar Efeitos de Sombra Impressionantes

Um poderoso gerador de CSS box-shadow que cria belos efeitos de sombra com visualização ao vivo. Recursos incluem múltiplas camadas de sombra, valores personalizáveis de blur, spread e offset, controle de opacidade e estilos predefinidos.

O que é CSS box-shadow?

CSS box-shadow é uma propriedade que adiciona efeitos de sombra ao redor da moldura de um elemento. Cria profundidade e interesse visual no design web.

Sintaxe:
box-shadow: offset-x offset-y blur spread color;

Componentes:
- offset-x: Posição horizontal da sombra
- offset-y: Posição vertical da sombra
- blur: Raio de desfoque (suavidade)
- spread: Expansão do tamanho da sombra
- color: Cor da sombra (suporta rgba)
- inset: Palavra-chave opcional para sombra interna

Exemplo:
box-shadow: 10px 10px 20px rgba(0,0,0,0.3);

Benefícios:
- Não precisa de imagens
- Acelerado por hardware
- Suporta múltiplas sombras
- Animável com transições CSS

Como criar múltiplas camadas de sombra?

Múltiplas sombras criam profundidade e realismo:

Método:
1. Clique em 'Adicionar Sombra'
2. Configure cada camada separadamente
3. As camadas empilham em ordem

Exemplo CSS:
box-shadow:
0 2px 4px rgba(0,0,0,0.1),
0 8px 16px rgba(0,0,0,0.1),
0 16px 32px rgba(0,0,0,0.1);

Dicas para sombras em camadas:
- Use opacidade decrescente
- Aumente blur com distância
- Mantenha cores consistentes
- 2-4 camadas geralmente são suficientes

Técnicas populares:
- Sombras de elevação (Material Design)
- Soft UI (Neumorfismo)
- Efeitos de brilho
- Ilusão de profundidade 3D

Qual a diferença entre blur e spread?

Blur e spread controlam diferentes aspectos:

Raio de Blur:
- Controla suavidade da sombra
- Valor alto = bordas mais suaves
- 0 = sombra nítida
- Afeta gradiente da sombra
- Ajuste mais comum

Raio de Spread:
- Controla tamanho da sombra
- Positivo = sombra maior
- Negativo = sombra menor
- 0 = mesmo tamanho do elemento
- Expande/contrai uniformemente

Exemplos:
Sombra nítida: blur: 0, spread: 0
Sombra suave: blur: 20px, spread: 0
Efeito brilho: blur: 20px, spread: 5px
Flutuante: blur: 40px, spread: -10px

Quando usar sombras inset?

Sombras inset aparecem dentro do elemento:

Casos de uso:
- Estados de botão pressionado
- Estilo de campos de entrada
- Design Neumorfismo
- Efeitos de profundidade interna
- Elementos afundados

Sintaxe:
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);

Dicas de design:
- Combine com sombra externa para 3D
- Use para estados :active de botões
- Excelente para inputs de formulário
- Cria aparência 'entalhada'

Neumorfismo:
box-shadow:
inset 5px 5px 10px #d1d1d1,
inset -5px -5px 10px #ffffff;

Como criar efeitos de sombra populares?

Estilos de sombra populares:

Material Design Elevation:
- Sombra 1: 0 1px 3px rgba(0,0,0,0.12)
- Sombra 2: 0 1px 2px rgba(0,0,0,0.24)

Cartão flutuante:
0 20px 40px -10px rgba(0,0,0,0.2)

Brilho Neon:
0 0 20px #ff00ff,
0 0 40px #ff00ff

Sombra suave:
0 10px 30px rgba(0,0,0,0.1)

Sombra dura:
5px 5px 0 #000

Neumorfismo:
box-shadow:
10px 10px 20px #d1d1d1,
-10px -10px 20px #ffffff;

Esta ferramenta inclui esses presets para uso rápido!

Recursos Principais

• Visualização ao vivo com atualizações instantâneas
• Ajustar deslocamento horizontal e vertical
• Controlar raio de blur e spread
• Personalizar cor da sombra e opacidade
• Alternar sombras inset/outset
• Adicionar múltiplas camadas de sombra
• 8 estilos de sombra predefinidos
• Personalizar cor da caixa e raio da borda
• Copiar código CSS pronto para usar
• Suporte a cor RGBA para transparência
• Presets de sombra Material Design
• Efeitos de Neumorfismo e brilho
• Processamento 100% do lado do cliente