Gerador de Sombras CSS

Referência

O que é CSS box-shadow?

A propriedade CSS box-shadow adiciona um ou mais efeitos de sombra ao redor do quadro de um elemento. É definida por deslocamentos relativos ao elemento, raios de desfoque e expansão, cor e uma palavra-chave inset opcional. Múltiplas sombras são separadas por vírgulas e renderizadas da frente para trás.

Sintaxe de box-shadow

box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color;
offset-x: Distância horizontal. Positivo = direita, negativo = esquerda.
offset-y: Distância vertical. Positivo = baixo, negativo = cima.
blur-radius (opcional, padrão 0): Valores maiores produzem uma sombra mais suave e difusa.
spread-radius (opcional, padrão 0): Valores positivos expandem a sombra, negativos a encolhem.
inset (opcional): Move a sombra para o interior do elemento.

Usando múltiplas camadas de sombra

Combinar múltiplas sombras cria efeitos de profundidade realistas. Uma técnica comum é combinar uma sombra ajustada e escura perto do elemento (para definição) com uma sombra grande e leve mais distante (para profundidade). Material Design e sistemas de design modernos usam sombras em camadas para comunicar elevação.

Dicas de design para sombras

Use cores rgba() ou hsla() — sombras semitransparentes parecem mais naturais que opacas.
Mantenha a fonte de luz consistente — use a mesma direção de deslocamento em toda a sua interface.
Evite preto puro — use um tom escuro da sua cor de marca para sombras mais suaves.
Desempenho — box-shadow aciona operações de repintura. Para elementos animados, prefira filter: drop-shadow().

Privacidade

Toda a geração de sombras é executada 100% no seu navegador. Nenhum dado é enviado a qualquer servidor.