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

[Canonical HTML page](https://gradiently.design/it/guide/css-box-shadow)

Un solo box-shadow grigio è il modo più rapido per far sembrare un’interfaccia un modello. Le ombre vere sono più ombre insieme, tinte, e più discrete di quanto pensi.

## The short version

- La proprietà CSS box shadow accetta una parola chiave inset facoltativa, due scostamenti, un raggio di sfocatura, un raggio di diffusione e un colore.
- Una sola box shadow sembra artificiale perché gli oggetti reali proiettano insieme un’ombra di contatto netta e una più ampia e morbida.
- Sovrapporre da tre a cinque ombre, ciascuna con circa il doppio di scostamento e sfocatura della precedente e bassa opacità, produce un’ombra morbida e credibile.
- Tingere l’ombra verso la tonalità dello sfondo sembra più naturale del nero puro su superfici colorate o calde.
- Animare box-shadow ridisegna a ogni fotogramma, quindi fai invece comparire con l’opacità uno pseudo-elemento che porta l’ombra più grande.

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

```css
/* 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); }
```

L’ombra segue sempre `border-radius`, ed è per questo che un’ombra con sola diffusione fa una bella linea sottile arrotondata senza cambiare il layout.

| Valore | Predefinito | Effetto |
| --- | --- | --- |
| `inset` | Disattivato | Disegna l’ombra dentro il bordo invece che fuori |
| Scostamento x e y | Obbligatorio | Sposta l’ombra. Luce dall’alto significa una y positiva |
| Sfocatura | 0 | Ammorbidisce il bordo. Valori più grandi allargano la sfumatura |
| Diffusione | 0 | Ingrandisce o riduce l’ombra prima della sfocatura. Il negativo la ritira |
| Colore | `currentcolor` | Usa un colore con alfa; le ombre opache sembrano adesivi |

La diffusione è il valore che la maggior parte salta e quello che risolve di più. Una piccola diffusione negativa impedisce a una grande sfocatura di uscire dai lati.

## 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.

### Ombra singola

- Una sfocatura media in nero al 25 per cento
- Alone grigio tutto intorno alla card
- Difficile capire a che altezza fluttua la card
- Sembra sporca sugli sfondi colorati

### Ombra a strati

- Quattro ombre, ciascuna più tenue e più ampia
- Densa vicino al bordo, leggera lontano
- L’altezza si legge a colpo d’occhio
- Tinta per stare in modo naturale sulla sua superficie

## 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. **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. **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. **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. **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.

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

Una scala di elevazione a tre livelli come proprietà personalizzate. Cambia `--shadow-color` una volta e ogni ombra del sistema la segue.

Memorizzare le ombre come variabili le trasforma in design token, il che mantiene coerenti ogni card, menu e finestra. [Variabili CSS per i temi](https://gradiently.design/it/guide/css-custom-properties-theming) e [design token](https://gradiently.design/it/guide/design-tokens) 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.

| Livello | Token | Usalo per |
| --- | --- | --- |
| 0 | nessuna, o una linea sottile di diffusione 1px | Campi di input, righe di tabella, card piatte su una pagina tinta |
| 1 | `--shadow-sm` | Card a riposo, pulsanti che devono sembrare premibili |
| 2 | `--shadow-md` | Card al passaggio del mouse, menu a tendina, popover |
| 3 | `--shadow-lg` | Finestre di dialogo, pannelli, tutto ciò che sta su una pagina oscurata |

Quattro livelli coprono quasi ogni interfaccia. Con di più le persone non riescono più a distinguerli.

## 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à.

- Pagina menta: #f0fdfa
- Ombra verde acqua: #134e4a
- Pagina lilla: #faf5ff
- Ombra prugna: #3b0764
- Pagina crema: #fdf6ec
- Ombra terra d’ombra: #451a03

Tre colori di pagina, ciascuno con il colore d’ombra che gli si addice. Usa i toni d’ombra dal 5 al 10 per cento per strato.

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](https://gradiently.design/it/guide/dark-mode-design) passa in rassegna i colori delle superfici. Per i pannelli che fluttuano sulle immagini, un [backdrop filter](https://gradiently.design/it/guide/css-blur-background) 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.

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

Entrambe le ombre sono dipinte una sola volta. Al passaggio del mouse cambia solo l’opacità, quindi nulla viene ridisegnato durante la transizione.

Altro su ciò che costa tempo di disegno è in [prestazioni dei gradienti CSS](https://gradiently.design/it/guide/css-gradient-performance), e lo stesso approccio a strati vale per i pulsanti in [pulsanti con gradiente in CSS](https://gradiently.design/it/guide/css-gradient-button).

## 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.

## FAQ

### Quali sono i valori di CSS box-shadow?

Un `inset` facoltativo, uno scostamento orizzontale, uno verticale, un raggio di sfocatura, un raggio di diffusione e un colore, per esempio `0 4px 12px 0 rgb(0 0 0 / 0.15)`.

### Come faccio un’ombra morbida con box shadow in CSS?

Sovrapponi da tre a cinque ombre, raddoppiando scostamento e sfocatura ogni volta, al 5-10 per cento di opacità ciascuna. Tingile verso il colore dello sfondo.

### Come aggiungo più di una box shadow?

Separale con virgole in una sola dichiarazione `box-shadow`. La prima ombra elencata è disegnata sopra.

### Cosa fa la diffusione in box-shadow?

Ingrandisce o riduce l’ombra prima che venga sfocata. Una diffusione negativa impedisce a una grande sfocatura di vedersi ai lati del riquadro.

### Animare box-shadow fa male alle prestazioni?

Ridisegna a ogni fotogramma. Metti l’ombra del passaggio del mouse su uno pseudo-elemento e fai invece una transizione della sua opacità.