CSS box shadow: ombre morbide e a strati che sembrano vere

Un CSS box shadow si scrive box-shadow: 0 4px 12px rgb(0 0 0 / 0.15): uno scostamento orizzontale, uno verticale, un raggio di sfocatura, una diffusione facoltativa e un colore. Quella singola ombra va bene per un prototipo veloce, ma raramente sembra vera. Le ombre che convincono l’occhio sono a strati: più ombre su un elemento, ciascuna più grande e più tenue della precedente, tinte per adattarsi alla superficie sotto.

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

Perché una sola ombra sembra finta

Appoggia un libro su un tavolo e guarda la sua ombra. Proprio al bordo dove tocca, l’ombra è scura e netta. Più lontano diventa ampia e tenue, perché la luce avvolge l’oggetto da molte direzioni. Un solo box-shadow può essere solo una di queste cose alla volta: stretta e dura, oppure ampia e sfocata. In entrambi i casi l’occhio nota che manca qualcosa.

Come sovrapporre le box shadow

Il metodo è semplice: parti piccolo e netto, poi raddoppia scostamento e sfocatura a ogni strato in più, tenendo ogni strato tenue. Le opacità si sommano dove gli strati si sovrappongono, quindi i singoli valori possono essere sorprendentemente bassi.

1. 1

   Parti da un’ombra di contatto

   0 1px 1px a circa l’8 per cento di opacità. È la linea scura subito sotto il bordo.

2. 2

   Raddoppia a ogni strato

   Poi 0 2px 2px, 0 4px 4px, 0 8px 8px. Scostamento e sfocatura crescono insieme, quindi la luce sembra venire dall’alto.

3. 3

   Tieni ogni strato tenue

   Tra il 5 e il 10 per cento ciascuno. Se il risultato sembra pesante, togli lo strato più grande prima di scurire qualsiasi cosa.

4. 4

   Tingi il colore

   Sostituisci il nero con una versione profonda della tonalità dello sfondo, come un blu notte su pagine blu o un marrone su un crema.

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

Memorizzare le ombre come variabili le trasforma in design token, il che mantiene coerenti ogni card, menu e finestra. Variabili CSS per i temi e design token mostrano come collegarle a un tema completo.

Una scala di elevazione per un’interfaccia

L’ombra è un segnale di altezza, quindi dovrebbe significare la stessa cosa ovunque. Scegli tre o quattro livelli e assegnali a dei compiti. Tutto ciò che fluttua più in alto ha un’ombra più grande e morbida, mai solo più scura.

Ombre su sfondi colorati e scuri

Le ombre nere pure diventano grigie e sporche su una superficie colorata, nello stesso modo in cui il nero mescolato a una vernice la spegne. Prendi invece il colore dell’ombra dallo sfondo: un’ombra verde acqua profonda su una pagina menta, un prugna scuro su una lilla. Sugli sfondi a gradiente, scegli lo stop più scuro del gradiente e usalo a bassa opacità.

In modalità scura le ombre quasi spariscono, perché c’è poca luce da bloccare. Mostra l’altezza rendendo invece le superfici rialzate un po’ più chiare, e tieni una linea sottile tenue sul bordo. Design per la modalità scura passa in rassegna i colori delle superfici. Per i pannelli che fluttuano sulle immagini, un backdrop filter spesso separa i livelli meglio di un’ombra più pesante.

Animare box-shadow senza scatti

Cambiare box-shadow al passaggio del mouse costringe il browser a ridisegnare l’ombra a ogni fotogramma della transizione. Su un solo pulsante va bene. Su una griglia di cinquanta card scatta. La soluzione standard è mettere l’ombra più grande su uno pseudo-elemento e far variare la sua opacità, che il browser può comporre a basso costo.

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

Altro su ciò che costa tempo di disegno è in prestazioni dei gradienti CSS, e lo stesso approccio a strati vale per i pulsanti in pulsanti con gradiente in CSS.

Quando saltare l’ombra

Le ombre separano una superficie da ciò che le sta dietro. Se lo sfondo è un gradiente ricco o una fotografia, un’ombra forte gli fa a pugni. Spesso uno sfondo più quieto fa più per la card di qualsiasi ombra. I Mark di Gradiently sono costruiti per questo: ognuno è uno sfondo vivo con i suoi colori, la sua luce e la sua grana, e le parole che ci metti sopra restano leggibili perché il Mark si calma dietro di esse, senza riquadri né ombre a fare il lavoro.