CSS Box-Shadow Multi

box-shadow multi-camada: profundidade, neon e Material

Uma única box-shadow raramente convence. Objetos reais lançam mais de uma sombra — um halo ambiente suave mais uma sombra direcional sob a fonte de luz. O CSS deixa empilhar quantas sombras quiser, separadas por vírgula. A sintaxe é box-shadow: x y blur spread cor, x y blur spread cor, ..., e a ordem de pintura é de cima para baixo: a primeira renderiza por cima, a última por baixo.

.card {
  box-shadow:
    0 1px  2px  rgba(0,0,0,.08),   /* ambiente, perto */
    0 4px  8px  rgba(0,0,0,.06),   /* distancia media */
    0 16px 32px rgba(0,0,0,.04);   /* longe, muito suave */
}

Elevação no Material Design

O sistema Material Design do Google pré-computa 24 níveis de elevação (0 a 24 dp), cada um definido por duas sombras empilhadas — uma key shadow (direcional, simula a direção da luz) e uma ambient shadow (suave, omnidirecional). Apple HIG e IBM Carbon usam pilhas de duas camadas similares. O padrão é universal porque espelha como a luz funciona de verdade.

Smooth shadows e profundidade natural

O designer Tobias van Schneider popularizou a técnica de "smooth shadow" — seis ou mais sombras com alpha baixo cada, empilhadas em offsets crescentes, formando um decaimento amanteigado que sombras únicas não atingem. Ferramentas como shadows.brumm.af geram essas pilhas. O truque é progressão geométrica: dobrar o offset y e o blur a cada camada enquanto reduz (ou mantém) o alpha, para a sombra acumulada parecer natural em vez de em bandas.

Inset, neon e botões 3D

• Inset — prefixe qualquer sombra com a keyword inset para pintar por dentro da caixa. Simula botões pressionados, glow interno ou inputs afundados.
• Neon glow — empilhe 3-4 sombras da mesma cor saturada com blur crescente (5px, 10px, 20px, 40px) e offset zero para halos concêntricos.
• Botão 3D — combine uma sombra clara acima-esquerda com uma sombra escura abaixo-direita para imitar plástico em relevo. Inverta no :active para uma sensação de pressão satisfatória.
• Spread negativo — encolhe a sombra dentro do footprint do elemento, útil para acentos de borda nítidos.

Performance e alternativas

Cada sombra é um passo de paint adicional. Seis camadas em um card estático são baratas; seis camadas em centenas de itens de lista vão derrubar o FPS de scroll no mobile, especialmente com raios de blur grandes (30px+). Duas mitigações: promova o elemento para uma camada de compositor própria com transform: translateZ(0) ou will-change: transform, e prefira filter: drop-shadow() para SVG/PNG com transparência (segue a máscara alpha em vez da bounding box). O Tailwind oferece utilitários shadow-sm/md/lg/xl/2xl para os casos comuns.

Perguntas frequentes

Muitas sombras deixam lento? Deixam quando o blur é grande e o elemento dá scroll ou anima. Profile com DevTools "Rendering > Paint flashing" — flashes verdes no scroll indicam repaint demais.

Devo usar box-shadow em ícones SVG? Não — use filter: drop-shadow() para a sombra seguir a silhueta real e não a bounding box retangular.

Como otimizar a renderização da sombra? Force uma camada composited (transform: translateZ(0)), reduza o raio de blur, ou cache a sombra em um background-image PNG para heroes estáticos.

Sombras no dark mode? Reduza a intensidade — sombras pretas pesadas em fundos escuros ficam lamacentas. Alguns designers invertem em glows brancos sutis para sugerir elevação por luz e não por profundidade.