CSS box shadow: sombras suaves em camadas que parecem reais

Uma box shadow no CSS se escreve box-shadow: 0 4px 12px rgb(0 0 0 / 0.15): um deslocamento horizontal, um vertical, um raio de desfoque, um espalhamento opcional e uma cor. Essa sombra única serve para um protótipo rápido, mas raramente parece real. As sombras que convencem o olho são em camadas: várias sombras em um elemento, cada uma maior e mais tênue que a anterior, tingidas para combinar com a superfície embaixo.

Sintaxe da box-shadow

/* inset? | offset-x | offset-y | blur | spread | color */
.card { box-shadow: 0 4px 12px 0 rgb(0 0 0 / 0.15); }

/* Negative spread tucks the shadow under the box */
.card { box-shadow: 0 12px 24px -8px rgb(0 0 0 / 0.25); }

/* Inset: a shadow inside the box, like a pressed well */
.well { box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.12); }

/* Spread only: a hairline that follows border-radius */
.chip { box-shadow: 0 0 0 1px rgb(15 23 42 / 0.08); }

/* Several shadows, comma separated, first on top */
.card { box-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 8px 16px rgb(0 0 0 / 0.08); }

Por que uma única sombra parece falsa

Ponha um livro numa mesa e olhe a sombra dele. Bem na borda onde toca, a sombra é escura e nítida. Mais longe ela fica larga e tênue, porque a luz envolve o objeto de várias direções. Uma só box-shadow só consegue ser uma dessas coisas por vez: curta e dura, ou larga e borrada. De qualquer modo o olho percebe que falta algo.

Como empilhar box shadows

O método é simples: comece pequeno e nítido e depois dobre o deslocamento e o desfoque a cada camada extra, mantendo cada uma tênue. As opacidades se somam onde as camadas se sobrepõem, então os valores individuais podem ser surpreendentemente baixos.

1. 1

   Comece com uma sombra de contato

   0 1px 1px com cerca de 8 por cento de opacidade. É a linha escura bem sob a borda.

2. 2

   Dobre a cada camada

   Depois 0 2px 2px, 0 4px 4px, 0 8px 8px. Deslocamento e desfoque crescem juntos, então a luz parece vir de cima.

3. 3

   Mantenha cada camada tênue

   Entre 5 e 10 por cento cada. Se o resultado ficar pesado, remova a maior camada antes de escurecer qualquer coisa.

4. 4

   Tinja a cor

   Troque o preto por uma versão profunda do matiz do fundo, como um azul-marinho em páginas azuis ou um marrom em creme.

:root {
  /* Shadow colour as channels, so opacity can vary per layer */
  --shadow-color: 222 47% 11%;

  --shadow-sm:
    0 1px 1px hsl(var(--shadow-color) / 0.08),
    0 2px 2px hsl(var(--shadow-color) / 0.06);

  --shadow-md:
    0 1px 1px hsl(var(--shadow-color) / 0.08),
    0 2px 2px hsl(var(--shadow-color) / 0.07),
    0 4px 4px hsl(var(--shadow-color) / 0.06),
    0 8px 8px hsl(var(--shadow-color) / 0.05);

  --shadow-lg:
    0 1px 1px hsl(var(--shadow-color) / 0.07),
    0 2px 2px hsl(var(--shadow-color) / 0.07),
    0 4px 4px hsl(var(--shadow-color) / 0.06),
    0 8px 8px hsl(var(--shadow-color) / 0.06),
    0 16px 16px hsl(var(--shadow-color) / 0.05),
    0 32px 32px hsl(var(--shadow-color) / 0.04);
}

.card { box-shadow: var(--shadow-md); }
.dialog { box-shadow: var(--shadow-lg); }

Guardar sombras como variáveis as transforma em design tokens, o que mantém todo cartão, menu e diálogo consistente. Variáveis CSS para temas e design tokens mostram como ligá-las em um tema completo.

Uma escala de elevação para uma interface

A sombra é um sinal de altura, então deve significar a mesma coisa em todo lugar. Escolha três ou quatro níveis e atribua funções. O que flutua mais alto ganha uma sombra maior e mais suave, nunca só mais escura.

Sombras em fundos coloridos e escuros

Sombras de preto puro ficam cinzentas e turvas em superfícies coloridas, do mesmo modo que preto misturado à tinta a opaca. Tire a cor da sombra do fundo: uma sombra azul-petróleo profunda numa página menta, um ameixa escuro numa lilás. Em fundos com gradiente, pegue o ponto mais escuro do gradiente e use com baixa opacidade.

No modo escuro, as sombras quase desaparecem, porque há pouca luz para bloquear. Mostre a altura deixando as superfícies elevadas um pouco mais claras e mantenha um fio tênue na borda. Design de modo escuro passa pelas cores de superfície. Para painéis que flutuam sobre imagens, um backdrop filter muitas vezes separa as camadas melhor que uma sombra mais pesada.

Animar a box-shadow sem engasgos

Mudar a box-shadow no hover obriga o navegador a redesenhar a sombra a cada quadro da transição. Em um botão, tudo bem. Em uma grade de cinquenta cartões, engasga. A solução padrão é pôr a sombra maior em um pseudoelemento e animar a opacidade dele, o que o navegador compõe a baixo custo.

.card {
  position: relative;
  box-shadow: var(--shadow-sm);
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: opacity 200ms ease-out;
  pointer-events: none;
}

.card:hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .card::after { transition: none; }
}

Mais sobre o que custa tempo de pintura está em desempenho de gradientes CSS, e a mesma abordagem em camadas serve para botões em botões com gradiente em CSS.

Quando dispensar a sombra

Sombras separam uma superfície do que está atrás. Se o fundo é um gradiente rico ou uma fotografia, uma sombra forte briga com ele. Muitas vezes um fundo mais quieto faz mais pelo cartão do que qualquer sombra. Os Marks do Gradiently foram feitos para isso: cada um é um fundo vivo com suas cores, luz e granulado, e as palavras que você coloca sobre ele continuam legíveis porque o Mark se acalma atrás delas, sem caixas nem sombras fazendo o trabalho.