tools.junyo.dev

box-shadow multicamada CSS

Box-shadow multicamada CSS: como criar sombras com profundidade real

A propriedade `box-shadow` no CSS aceita uma lista de sombras separadas por vírgula. A ordem importa: a primeira sombra da lista fica sobre as demais. Sombras realistas em design moderno usam de três a cinco camadas com opacidades muito baixas (3–15%) em vez de uma sombra escura única, porque é assim que a luz se comporta em superfícies físicas — ela se difunde progressivamente. O Material Design 3 usa essa técnica para cada nível de elevação.

Por que usar múltiplas camadas muda tudo

  • Uma sombra única com blur alto parece genérica porque não corresponde à física real da luz. A luz direta cria uma sombra afiada, a luz difusa cria uma sombra suave — e na vida real ambas coexistem. Para replicar isso, combine uma camada com blur pequeno e opacidade maior (sombra direta) com outra camada de blur amplo e opacidade muito baixa (sombra difusa).
  • A cor da sombra importa tanto quanto os números. Evite preto puro (#000). Use o hue do fundo levemente escurecido — por exemplo, se o fundo for `hsl(220, 10%, 10%)`, a sombra ideal fica em torno de `hsl(220, 30%, 5%)` com 20–30% de opacidade. Isso produz sombras com "temperatura" visual coerente com o restante da interface.
  • O parâmetro `spread` negativo é subestimado. Com spread negativo, a sombra se contrai antes de aplicar o blur — o resultado é uma sombra mais precisa que pareça partir de dentro da borda do elemento em vez de extravasar. Combinado com offset Y positivo, cria o efeito clássico de cartão suspenso.

Fórmulas de sombra prontas para copiar

Card suspenso (3 camadas)

Entrada
Elemento 200×100px sobre fundo claro
Saída esperada
box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.04);

Clássico para cards e panels. Sensação de leveza sem agressividade visual.

Efeito neon (inset + outer)

Entrada
Botão sobre fundo escuro, accent verde
Saída esperada
box-shadow: 0 0 0 1px rgba(61,220,151,.3), 0 0 20px rgba(61,220,151,.2), inset 0 0 8px rgba(61,220,151,.1);

Técnica usada em interfaces dark-mode para criar glow sem excesso.

FAQ da ferramenta completa

Sim. O CSS permite quantas camadas quiser separadas por vírgula. Cada camada tem seus próprios parâmetros de offset, blur, spread e cor, o que permite efeitos muito mais ricos do que uma única sombra.

Perguntas frequentes

Qual o limite de camadas no box-shadow?

A especificação CSS não define limite. Na prática, 4–5 camadas cobrem todos os efeitos sem impacto de performance perceptível.

Box-shadow com inset funciona como border?

Não exatamente: border ocupa espaço no layout, inset shadow não. Box-shadow inset com spread positivo cria um contorno interno que não afeta o box-model — útil para inputs e fields de formulário.