# Gradienti in modalità scura: mantenere la profondità senza abbagliare

[Canonical HTML page](https://gradiently.design/it/guide/dark-mode-gradients)

Un gradiente che brilla con garbo sul bianco può accecare su uno schermo scuro. Ecco come regolare i gradienti per la modalità scura così da mantenere la profondità, con CSS per prefers-color-scheme, light-dark() e un interruttore manuale.

## The short version

- I gradienti in dark mode vanno riprogettati per il tema scuro, perché gli stessi colori saturi che sul bianco sembrano equilibrati su uno sfondo scuro risultano duri e abbaglianti.
- Sui fondi scuri, abbassa il chroma dei colori del gradiente, limita il colore acceso alle aree piccole e usa un quasi nero tinto verso la tonalità del brand invece del nero puro.
- Per cambiare i gradienti tra i temi, salva i loro colori in proprietà personalizzate CSS e ridefiniscili dentro una media query prefers-color-scheme: dark.
- La funzione CSS light-dark() sceglie tra due colori in base al color-scheme attivo, e tiene i due valori uno accanto all’altro.
- I gradienti scuri creano bande più visibili di quelli chiari, quindi in dark mode vale la pena aggiungere un leggero livello di grana.

I **gradienti in dark mode** danno il meglio quando hanno colori propri invece di riusare quelli del tema chiaro. Su un fondo scuro l’occhio si adatta e ogni colore saturo sembra più luminoso, quindi un gradiente che sul bianco era calmo comincia ad abbagliare. Abbassa il chroma, limita il colore vivace alle aree piccole, tingi il fondo invece di usare il nero puro e cambia i valori con `prefers-color-scheme` o `light-dark()`. La profondità resta; l’abbaglio se ne va.

## Perché i gradienti del tema chiaro falliscono al buio

Quando la pagina diventa scura cambiano tre cose. Le grandi aree luminose diventano la cosa più luminosa della stanza, e si leggono come abbaglio e non come colore. Le ombre smettono di funzionare, quindi i gradienti che si affidavano ai bordi scuriti per la profondità la perdono. E i passaggi tra toni scuri si vedono più facilmente, quindi i gradienti sottili cominciano a creare bande. [Design in modalità scura](https://gradiently.design/it/guide/dark-mode-design) tratta il tema nel complesso; questa pagina parla dei gradienti.

- Hero del tema chiaro: `linear-gradient(135deg, #ede9fe 0%, #c4b5fd 50%, #f9a8d4 100%)`
- Scuro ingenuo: piena saturazione: `linear-gradient(135deg, #7c3aed 0%, #db2777 100%)`
- Scuro regolato: luce da un angolo: `radial-gradient(circle at 80% 15%, #4c1d95 0%, #1a1530 45%, #0b0a14 85%)`

Lo stesso gradiente del brand in tre modi. Quello di mezzo è ciò che succede quando un design chiaro viene semplicemente scurito: rumoroso, piatto, stancante. L’ultimo mantiene il viola ma lo lascia brillare da un angolo su un fondo tinto.

## Cinque regole per i gradienti in dark mode

1. **Tingi il fondo** Usa un quasi nero che tende alla tua tonalità, come `#0b0a14` per i brand viola, invece di `#000000`. Il nero puro fa sembrare il colore incollato sopra.
2. **Abbassa il chroma** Riduci la saturazione di circa un terzo per le aree ampie. In OKLCH, mantieni la tonalità e riduci il valore C.
3. **Rimpicciolisci la parte luminosa** Lascia che il colore vivace occupi un angolo o un bagliore, e che gran parte della superficie resti vicina al fondo.
4. **Solleva, non ombreggiare** Mostra l’elevazione con superfici leggermente più chiare e gradienti che si schiariscono verso l’alto, dato che le ombre scompaiono sui fondi scuri.
5. **Aggiungi grana** Un rumore fine rompe i gradini visibili nelle sfumature scure. [Gradienti granulosi](https://gradiently.design/it/guide/grainy-gradients) ha la ricetta.

- Fondo: #0b0a14
- Superficie: #1a1530
- In rilievo: #2a2148
- Viola profondo: #4c1d95
- Accento: #8b5cf6
- Accento per il testo: #c4b5fd

Un set di gradienti scuri per un brand viola. Gran parte dello schermo usa i primi tre; l’accento compare in pochi punti, e il lilla pallido è riservato a testo e icone.

## Cambiare i gradienti con prefers-color-scheme

Salva nelle proprietà personalizzate i colori del gradiente, non interi gradienti. Così il tema scuro deve solo ridefinire i colori, e ogni componente che li usa si aggiorna. È lo stesso schema descritto in [variabili CSS per i temi](https://gradiently.design/it/guide/css-custom-properties-theming).

```css
:root {
  color-scheme: light dark;
  --ground: #faf8ff;
  --glow: #c4b5fd;
  --glow-2: #f9a8d4;
  --hero: radial-gradient(circle at 80% 15%, var(--glow) 0%, transparent 45%),
          radial-gradient(circle at 10% 90%, var(--glow-2) 0%, transparent 50%),
          var(--ground);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0b0a14;
    --glow: #4c1d95;
    --glow-2: #1e3a8a;
  }
}

.hero {
  background: var(--hero);
}
```

Poiché --hero e i suoi colori stanno sullo stesso elemento, ridefinire i colori nella media query aggiorna il gradiente ovunque sia usato. color-scheme dice inoltre al browser di scurire le barre di scorrimento e i controlli dei moduli.

Nota che i bagliori scuri sono più profondi, non più luminosi. Su un fondo scuro un colore deve essere appena più chiaro di ciò che lo circonda per leggersi come luce.

### Usare light-dark()

La funzione `light-dark()` restituisce il primo colore in uno schema chiaro e il secondo in uno scuro. Richiede `color-scheme: light dark` sull’elemento o su un antenato, ed è supportata in Chrome, Edge, Safari e Firefox attuali. Tiene entrambi i valori su una riga, il che rende più facile rivedere una palette.

```css
:root {
  color-scheme: light dark;
}

.card {
  background: linear-gradient(
    180deg,
    light-dark(#ffffff, #1a1530) 0%,
    light-dark(#f5f3ff, #0b0a14) 100%
  );
  color: light-dark(#1e1b2e, #e9e5f5);
}
```

Nei browser attuali light-dark() accetta colori, non immagini, quindi usala per ogni stop e non per l’intero gradiente.

### Supportare un interruttore manuale del tema

Molti siti permettono di sovrascrivere l’impostazione di sistema. Metti la scelta sull’elemento radice e limita le variabili a quella. La media query gestisce il valore predefinito; l’attributo vince quando qualcuno sceglie.

```css
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0b0a14;
  --glow: #4c1d95;
  --glow-2: #1e3a8a;
}

:root[data-theme="light"] {
  color-scheme: light;
}
```

Impostare color-scheme su un solo valore fa seguire l’interruttore anche a light-dark().

## Regolare un gradiente per la dark mode

Ecco lo stesso gradiente del brand regolato stop per stop. Lavorare in OKLCH lo rende prevedibile, perché luminosità e chroma sono numeri separati; [OKLCH spiegato](https://gradiently.design/it/guide/oklch-explained) mostra perché.

| Stop | Tema chiaro | Tema scuro | Cambiamento |
| --- | --- | --- | --- |
| Fondo | `oklch(98% 0.01 295)` | `oklch(15% 0.03 295)` | Quasi nero tinto, non nero |
| Principale | `oklch(85% 0.09 295)` | `oklch(35% 0.15 295)` | Più scuro, chroma moderato |
| Accento | `oklch(84% 0.10 350)` | `oklch(40% 0.12 265)` | Spostato verso il freddo per evitare un rosa acceso e accecante |
| Accento per il testo | `oklch(45% 0.20 295)` | `oklch(82% 0.09 295)` | Più chiaro e morbido per il testo piccolo |

La tonalità resta dov’è per i colori principali, così il brand si riconosce in entrambi i temi.

Hero del tema scuro, in OKLCH: `radial-gradient(circle at 80% 15%, oklch(35% 0.15 295) 0%, transparent 45%), radial-gradient(circle at 10% 90%, oklch(40% 0.12 265) 0%, transparent 50%), linear-gradient(oklch(15% 0.03 295), oklch(15% 0.03 295))`

I valori scuri della tabella, sovrapposti. Copialo, poi ritocca il chroma finché il bagliore sembra caldo e non luminoso.

## Testo sui gradienti scuri

Il testo chiaro su un gradiente scuro di solito ha contrasto in abbondanza, ma controllalo dove il gradiente è più luminoso, non dove è più scuro. Un titolo in `#e2e8f0` su `#0b0a14` è ben sopra il 4,5:1 che le WCAG chiedono per il testo corrente; lo stesso titolo su un bagliore viola acceso potrebbe non esserlo. Evita anche il testo corrente bianco puro su quasi nero: un contrasto altissimo causa alonatura per alcuni lettori, quindi un bianco sporco tenue è più gentile. [Contrasto dei colori e accessibilità](https://gradiently.design/it/guide/color-contrast-accessibility) ha i numeri.

### Da evitare in dark mode

- Fondo nero puro con stop saturi
- Il gradiente del tema chiaro, scurito
- Grandi aree di colore neon
- Paragrafi bianco puro
- Gradienti scuri lisci senza grana

### Da fare

- Un fondo quasi nero tinto
- Un set separato di stop scuri
- Il colore come luce da un angolo
- Testo bianco sporco, intorno a `#e9e5f5`
- Un livello di rumore fine per nascondere le bande

Per altre palette scure, [sfondi a gradiente scuro](https://gradiently.design/it/guide/dark-gradient-backgrounds) ne ha un set da copiare. E per post social e slide, dove non puoi testare a mano ogni riga, Inchiostro automatico di Gradiently sceglie testo chiaro o scuro per riga dalla palette del Mark, e il Mark sposta la sua zona più calma dietro le parole, così un design scuro non mette mai un titolo sul suo bagliore più luminoso.

## FAQ

### Come cambio un gradiente in dark mode?

Metti i colori del gradiente in proprietà personalizzate CSS e ridefiniscili dentro `@media (prefers-color-scheme: dark)`. Il gradiente si aggiorna ovunque usi quelle variabili.

### Posso usare light-dark() dentro un gradiente?

Sì, per ogni stop di colore, dato che light-dark() restituisce un colore. Richiede `color-scheme: light dark` sull’elemento o su un antenato.

### Perché i miei gradienti sembrano troppo luminosi in dark mode?

Gli occhi si adattano agli schermi scuri, quindi i colori saturi sembrano più forti. Abbassa il chroma, scurisci gli stop e limita il colore acceso alle aree piccole.

### La dark mode deve usare il nero puro?

Di solito non per i gradienti. Un quasi nero tinto verso la tonalità del brand fa fondere i colori in modo naturale e riduce il contrasto duro.

### Perché il mio gradiente scuro mostra delle strisce?

I toni scuri stanno molto vicini nel colore a 8 bit, quindi i gradini diventano visibili. Aggiungi un leggero livello di grana ed evita una forte compressione.