CSS box-shadow: sombras suaves e em camadas que parecem reais

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

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); }

Porque é que uma só sombra parece falsa

Põe um livro numa mesa e olha para a sombra. Mesmo na margem onde toca, a sombra é escura e nítida. Mais longe torna-se larga e ténue, porque a luz envolve o objeto vinda de muitas direções. Uma só box-shadow só pode ser uma dessas coisas de cada vez: estreita e dura, ou larga e desfocada. De qualquer forma, o olho nota que falta algo.

Como empilhar box-shadows

O método é simples: começa pequeno e nítido e depois duplica o deslocamento e o desfoque a cada camada extra, mantendo todas as camadas ténues. As opacidades somam-se onde as camadas se sobrepõem, por isso os valores individuais podem ser surpreendentemente baixos.

1. 1

   Começa com uma sombra de contacto

   0 1px 1px com cerca de 8 por cento de opacidade. É a linha escura mesmo debaixo da margem.

2. 2

   Duplica a cada camada

   Depois 0 2px 2px, 0 4px 4px, 0 8px 8px. O deslocamento e o desfoque crescem juntos, por isso a luz parece vir de cima.

3. 3

   Mantém cada camada ténue

   Entre 5 e 10 por cento cada. Se o resultado parecer pesado, remove a camada maior antes de escurecer o que quer que seja.

4. 4

   Dá tom à cor

   Troca o preto por uma versão profunda do tom do fundo, como um azul-marinho em páginas azuis ou um castanho 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 transforma-as em tokens de design, o que mantém coerentes todos os cartões, menus e diálogos. As variáveis CSS para temas e os tokens de design mostram como as ligar a um tema completo.

Uma escala de elevação para uma interface

A sombra é um sinal de altura, por isso deve significar o mesmo em todo o lado. Escolhe três ou quatro níveis e atribui-os a funções. O que flutua mais alto recebe uma sombra maior e mais suave, nunca só mais escura.

Sombras em fundos coloridos e escuros

As sombras de preto puro ficam cinzentas e lamacentas numa superfície colorida, tal como o preto misturado em tinta a embacia. Tira antes a cor da sombra do fundo: uma sombra azul-petróleo profundo numa página de menta, um ameixa escuro numa de lilás. Em fundos de gradiente, escolhe a paragem mais escura do gradiente e usa-a com baixa opacidade.

No modo escuro, as sombras quase desaparecem, porque há pouca luz para bloquear. Mostra a altura tornando as superfícies elevadas ligeiramente mais claras e mantém uma linha fina ténue na margem. O design para modo escuro percorre as cores das superfícies. Para painéis que flutuam sobre imagens, um backdrop filter separa muitas vezes as camadas melhor do que uma sombra mais pesada.

Animar a box-shadow sem engasgos

Alterar a box-shadow ao passar o rato obriga o navegador a repintar a sombra em cada fotograma da transição. Num botão não há problema. Numa grelha de cinquenta cartões, engasga. A solução habitual é pôr a sombra maior num pseudo-elemento e fazer surgir a sua opacidade, o que o navegador consegue compor com pouco 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; }
}

Há mais sobre o que custa tempo de pintura no desempenho dos gradientes em CSS, e a mesma abordagem em camadas serve para botões nos botões com gradiente em CSS.

Quando dispensar a sombra

As sombras separam uma superfície do que está por trás. Se o fundo é um gradiente rico ou uma fotografia, uma sombra forte luta com ele. Muitas vezes um fundo mais calmo faz mais pelo cartão do que qualquer sombra. Os Marks do Gradiently são feitos para isso: cada um é um fundo vivo com as suas cores, luz e grão, e as palavras que lá pões continuam legíveis porque o Mark se acalma por trás delas, sem caixas nem sombras a fazer o trabalho.