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!

Como converter esta sombra para Tailwind ou React?

Use o seletor de formato acima da caixa de código para alternar entre CSS, Tailwind e React. O botão Copiar copia o formato ativo.

Tailwind (valor arbitrário):
O Tailwind não permite espaços dentro de valores arbitrários, então os espaços dentro de uma camada viram underscores e as vírgulas mantêm as múltiplas camadas juntas:
shadow-[0_10px_30px_rgba(0,0,0,0.2)]
A ferramenta também gera as classes bg-[...] e rounded-[...] correspondentes.

React / JSX (objeto de estilo inline):
JSX precisa de uma chave camelCase e um valor de string entre aspas:
style={{ boxShadow: '0 10px 30px rgba(0,0,0,0.2)', backgroundColor: '#ffffff', borderRadius: 8 }}

Sombras multicamada e inset são serializadas corretamente nos três formatos.

Por que minha sombra parece diferente entre navegadores ou em telas retina?

Pequenas diferenças de renderização são normais:

- Arredondamento subpixel: blur e spread são rasterizados de forma diferente em cada motor. Em telas retina (2x/3x) uma sombra de 1px pode parecer mais suave; ajuste o blur ou use offsets em pixels inteiros para manter a nitidez.
- Espaços de cor: rgba() é interpretado em sRGB em todo lugar, então prefira rgba/hex em vez de nomes de cor.
- box-shadow vs filter: drop-shadow(): box-shadow segue o border-box retangular do elemento. Para formas não retangulares (PNG com transparência, clip-path, ícones SVG) use filter: drop-shadow(), que traça o contorno alfa real.

Acessibilidade: sombras são decorativas. Nunca dependa apenas de uma sombra para indicar estado (foco, erro); combine com uma borda ou mudança de cor visível e mantenha contraste suficiente.

Desempenho: raios de blur muito grandes são caros de repintar, especialmente ao animar. Evite animar box-shadow diretamente em elementos grandes; anime a opacidade de um pseudo-elemento ou use will-change: transform apenas nos poucos elementos que realmente precisam.

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