# Gradienti sottili: variazioni di colore discrete per interfacce pulite

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

I migliori gradienti per le interfacce sono quelli che nessuno nota finché non spariscono. Ecco codici da incollare subito, i punti in cui rendono di più e l’unica trappola tecnica in cui cadono tutti.

## The short version

- Un gradiente sottile cambia la luminosità di pochi punti percentuali, o sposta la tonalità di un passo piccolo, così una superficie sembra illuminata e non piatta.
- I gradienti sottili funzionano meglio su sfondi di pagina, card, sezioni hero e superfici in modalità scura, dove aggiungono profondità senza competere con il contenuto.
- Miscelare in oklch mantiene uniforme da un capo all’altro la variazione di luminosità di un gradiente sottile.
- I gradienti sottili mostrano più banding di quelli marcati, perché tra due toni vicini ci sono meno passaggi di colore, e di solito si rimedia con un po’ di rumore.
- In un’interfaccia scura, un bordo superiore appena più chiaro si legge come luce che cade sulla superficie.

Un **gradiente sottile** passa tra due colori così vicini che la differenza si sente più di quanto si veda: dal bianco a un bianco sporco freddo, dal quasi nero a un quasi nero appena più morbido. Quella piccola variazione fa sembrare illuminata una superficie, ed è per questo che le interfacce pulite li usano su sfondi di pagina, card e pannelli in modalità scura. I codici qui sotto tengono la differenza di luminosità entro pochi punti percentuali; oltre, il gradiente comincia a diventare un elemento in vista invece di una superficie.

## Codici di gradienti sottili chiari

Ognuno parte vicino al bianco e scivola verso una tinta appena accennata. Scegli la tinta dal colore del tuo brand, così anche lo sfondo porta una traccia di identità. Le sfumature dall’alto verso il basso sono le più naturali, perché la luce di solito arriva dall’alto.

- Carta: `linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%)`
- Azzurro nebbia: `linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%)`
- Lino caldo: `linear-gradient(160deg, #fdfbf7 0%, #f5efe6 100%)`
- Foschia lilla: `linear-gradient(135deg, #faf8ff 0%, #f1ecfd 100%)`
- Velo di menta: `linear-gradient(180deg, #f7fdfb 0%, #e9f7f2 100%)`
- Luce d’angolo: `radial-gradient(circle at 0% 0%, #ffffff 0%, #f3f4f6 70%)`

Sei gradienti sottili chiari. Su un monitor luminoso sembrano carta appena illuminata; su un telefono in pieno giorno, quasi bianco.

## Codici di gradienti sottili scuri

Le superfici scure ne traggono ancora più vantaggio, perché il nero piatto e puro sembra un buco nello schermo. Alza un po’ la parte alta e lascia che quella bassa si assesti. I [gradienti per la modalità scura](https://gradiently.design/it/guide/dark-mode-gradients) trattano temi interi; questi sono i mattoni di base.

- Grafite: `linear-gradient(180deg, #18181b 0%, #0f0f12 100%)`
- Mezzanotte: `linear-gradient(180deg, #111827 0%, #0b1120 100%)`
- Inchiostro viola: `linear-gradient(160deg, #17142a 0%, #0e0c1b 100%)`
- Notte nel bosco: `linear-gradient(180deg, #10201b 0%, #0a1411 100%)`
- Bagliore in alto: `radial-gradient(ellipse 80% 50% at 50% 0%, #1f2937 0%, #0b0f17 100%)`
- Espresso: `linear-gradient(180deg, #1c1714 0%, #120e0c 100%)`

Sei gradienti sottili scuri. Il bagliore in alto si adatta a un hero o a un modale: una debole pozza di luce dall’alto.

## Dove funzionano i gradienti sottili in un’interfaccia

| Superficie | Quanto sottile | Esempio |
| --- | --- | --- |
| Sfondo di pagina | Appena visibile lungo tutta l’altezza | `#ffffff` a `#f6f7f9` |
| Card | Un tocco più chiaro sul bordo superiore | `#ffffff` a `#fafafa` |
| Sezione hero | Una tinta lieve che si raccoglie dietro il titolo | Luce d’angolo o bagliore in alto |
| Pulsante | Parte alta più chiara, parte bassa un po’ più profonda | `#4f46e5` a `#4338ca` |
| Pannello in modalità scura | Alto sollevato, basso assestato | `#18181b` a `#0f0f12` |
| Barra laterale o footer | Un gradino più scuro della pagina, comunque sfumato | `#f8fafc` a `#eef2f7` |

I gradienti sottili per superficie. Usa una sola direzione in tutta l’interfaccia, così la luce sembra venire da un unico punto.

La regola pratica: un gradiente sottile non dovrebbe mai essere ciò che si guarda. Se chi rivede il lavoro commenta il gradiente, è troppo forte per uno sfondo. Per look ancora più sobri, a stampa e sui social oltre che su schermo, vedi gli [sfondi minimalisti](https://gradiently.design/it/guide/minimalist-backgrounds).

Un post verticale con una breve riga di testo su uno sfondo calmo, dalle sfumature appena percettibili

Uno sfondo calmo e una sola riga breve. Quando il colore resta quieto, è il testo a fare il lavoro.

## Come tingere un gradiente sottile con il colore del tuo brand

Un gradiente grigio neutro è sicuro ma anonimo. Tingere l’estremo più chiaro o più scuro con una traccia della tonalità del brand fa sentire tutta l’interfaccia imparentata con il logo, senza che nessuno sappia dire perché. Il trucco è tenere la tonalità e buttare via quasi tutta la saturazione.

1. **Prendi la tonalità del brand** Converti il colore principale del brand in oklch o HSL e annota solo la tonalità: circa 265 per un viola, 160 per un verde, 30 per un arancione caldo.
2. **Tienilo quasi grigio** Imposta una croma molto bassa, intorno a 0,005 e 0,015 in oklch, oppure una saturazione sotto il 30% circa in HSL con luminosità altissima. Vuoi un soffio di colore, non un pastello.
3. **Imposta due valori di luminosità** Per i temi chiari prova 99% e 96%; per quelli scuri circa 20% e 15%. Tieni entrambi gli estremi sulla stessa tonalità, così la sfumatura non scivola verso il grigio o verso un secondo colore.
4. **Controllalo accanto a bianco o nero puro** Metti il gradiente accanto a un blocco bianco o nero semplice. Se non vedi alcuna differenza, sposta un po’ l’estremo inferiore; se la tinta si nota da lontano, abbassa la croma.

La stessa tinta può poi passare a bordi, divisori e stati di hover, così il gradiente diventa un elemento di un sistema quieto e non un effetto isolato. I pulsanti sono l’unico posto in cui concedere una variazione un po’ più forte, qualche punto percentuale più scuro in basso, perché un accenno di volume li fa sembrare premibili.

## Scrivere un gradiente sottile in CSS

I codici esadecimali funzionano ovunque. Per un controllo più fine, scrivi i colori in oklch, dove il primo numero è la luminosità percepita, così puoi impostare la variazione con precisione: da 99% a 96%, per esempio. Miscelare in oklch mantiene anche uniforme il cambiamento lungo tutta la lunghezza. [CSS gradient oklch](https://gradiently.design/it/guide/css-gradient-oklch) spiega la sintassi, e [CSS linear gradient](https://gradiently.design/it/guide/css-linear-gradient) copre le basi.

```css
:root {
  --surface: linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  :root {
    /* lightness 99% to 96.5%, the same faint cool tint */
    --surface: linear-gradient(180deg in oklch, oklch(99% 0.003 250) 0%, oklch(96.5% 0.006 250) 100%);
  }
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--surface);
  background-attachment: fixed;
}
```

Un valore esadecimale di riserva, poi una versione in oklch con uno scarto di luminosità preciso per i browser che supportano l’interpolazione del colore nei gradienti.

> **Fisso o scorrevole** `background-attachment: fixed` lega il gradiente alla finestra, così una pagina lunga non lo stira fino a farne una variazione invisibile. Provalo su mobile, dove alcuni browser trattano gli sfondi fissi in modo diverso.

## Perché i gradienti sottili mostrano il banding, e il rimedio

Due colori vicini hanno pochissimi passaggi in un’immagine a 8 bit. Stirali su un hero di 1920 pixel e ogni passaggio diventa una striscia visibile, soprattutto nei gradienti scuri e sugli schermi più economici. La spiegazione completa è nel [banding dei gradienti](https://gradiently.design/it/guide/gradient-banding).

### Mostra le bande

- Due colori scuri molto vicini su tutto lo schermo
- Un gradiente salvato come JPEG compresso
- Una sfumatura pulita senza nulla che spezzi i passaggi

### Resta liscio

- Una variazione un po’ più ampia, o un terzo punto di colore
- Reso in CSS, oppure esportato come PNG
- Uno strato di rumore leggero sopra il gradiente

Sul web, una minuscola texture di rumore SVG stesa sul gradiente a bassa opacità elimina i passaggi visibili senza che nessuno noti la grana; la [texture di rumore in CSS](https://gradiently.design/it/guide/css-noise-texture) ha il codice. Per post social e slide, un Mark di Gradiently porta con sé la sua grana e si rende a ogni dimensione, così uno sfondo quieto resta liscio sia in una storia sia in un banner. Quando vuoi l’opposto della quiete, i [gradienti vivaci](https://gradiently.design/it/guide/vibrant-gradients) offrono i codici saturi.

## FAQ

### Che cos’è un gradiente sottile?

Un gradiente tra due colori molto vicini, di solito diversi per luminosità di pochi punti percentuali, così la superficie sembra appena illuminata e non visibilmente colorata.

### Qual è un buon gradiente sottile per uno sfondo bianco?

Prova `linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%)`, che scivola dal bianco a un grigio freddo appena percettibile.

### Perché il mio gradiente sottile sembra a strisce?

I colori vicini hanno pochi passaggi tra loro, quindi mostrano il banding. Aggiungi un terzo punto di colore, allarga un po’ la variazione o stendi sopra una leggera texture di rumore.

### I gradienti sottili vanno dall’alto verso il basso?

Di solito sì. La luce tende a venire dall’alto, quindi una parte alta appena più chiara appare naturale sia su superfici chiare sia su quelle scure.