# Gradienti monocromatici: una tinta, tante sfumature

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

Un solo colore che cambia solo in luminosità: è il gradiente più silenzioso che esista, e quello che mostra ogni difetto. Ecco codici che funzionano, il CSS che tiene onesta la tinta e la soluzione alle bande.

## The short version

- Un gradiente monocromatico fonde una sola tinta dallo scuro al chiaro, oppure va dal nero al bianco attraverso i grigi.
- Un gradiente monocromatico è una sola sfumatura, mentre una combinazione di colori monocromatica è un’intera palette costruita su una tinta.
- Definire i punti in oklch con una tinta fissa evita che un gradiente a colore singolo scivoli verso il grigio o verso un’altra tinta.
- I gradienti monocromatici scuri sono quelli che producono più bande, perché uno schermo a 8 bit ha pochissimi gradini distinti tra i toni vicini al nero.
- Un leggero strato di grana sopra un gradiente monocromatico nasconde le bande e lo fa sembrare una superficie.

Un **gradiente monocromatico** fonde una tinta attraverso le sue stesse sfumature, dal profondo al chiaro, senza introdurre un secondo colore. Dal nero al bianco passando per il grigio è la versione più pura; anche un blu notte che sale verso un azzurro pallido, o una melanzana che si schiarisce in lilla, sono gradienti monocromatici. Sembrano calmi e costosi perché nulla compete, e per lo stesso motivo mostrano ogni difetto: bande, punti medi fangosi e una tinta che deriva a metà strada. I codici e il CSS qui sotto evitano tutti e tre.

Dal carbone all’argento: `linear-gradient(180deg, #0a0a0a 0%, #2b2b2b 45%, #6e6e6e 80%, #b5b5b5 100%)`

Un gradiente bianco e nero con i punti addensati verso il lato scuro, così gran parte del riquadro resta profonda e la luce arriva tardi.

## Gradiente monocromatico e combinazione di colori monocromatica

I due termini sono imparentati e spesso confusi. Una [combinazione di colori monocromatica](https://gradiently.design/it/guide/monochromatic-color-scheme) è una palette: diverse tinte, toni e sfumature di un’unica tonalità usate in tutto un design. Un gradiente monocromatico è una singola sfumatura dentro quell’idea. Puoi usare un gradiente monocromatico in un design la cui palette non è affatto monocromatica, come uno sfondo blu profondo sotto un testo arancione.

| Aspetto | Gradiente monocromatico | Combinazione monocromatica |
| --- | --- | --- |
| Cos’è | Una sfumatura continua | Un insieme di colori separati |
| Dove vive | Uno sfondo, una forma, un pulsante | Un intero brand o un’impaginazione |
| Numero di tinte | Una | Una |
| Uso tipico | Sfondi hero, schede, poster | Interfacce, illustrazione, identità |

Stesso principio, scala diversa. Il gradiente è una superficie; la combinazione è un sistema.

## Codici di gradienti monocromatici da copiare

Ognuno mantiene una sola tinta e cambia solo la luminosità e un po’ di saturazione. I punti più scuri sono leggermente più saturi di quelli chiari, ed è così che si comporta il colore vero nell’ombra e per questo sembrano naturali.

- Dal nero al bianco: `linear-gradient(180deg, #000000 0%, #ffffff 100%)`
- Riflettore grafite: `radial-gradient(circle at 50% 30%, #3a3a3a 0%, #161616 50%, #050505 100%)`
- Dal blu notte al cielo: `linear-gradient(160deg, #0a1a3f 0%, #1e40af 50%, #93c5fd 100%)`
- Dal pino alla menta: `linear-gradient(160deg, #052e1c 0%, #15803d 55%, #bbf7d0 100%)`
- Dal rosso bue al rosa tenue: `linear-gradient(160deg, #2a0a12 0%, #9f1239 55%, #fecdd3 100%)`
- Dalla melanzana al lilla: `linear-gradient(160deg, #1c0b33 0%, #6d28d9 55%, #ddd6fe 100%)`
- Dalla terra d’ombra al miele: `linear-gradient(160deg, #2b1a05 0%, #b45309 55%, #fde68a 100%)`
- Dalla carta alla pietra: `linear-gradient(180deg, #f7f5f2 0%, #d6d1ca 100%)`

Otto gradienti a colore singolo. Ognuno resta nella propria tinta da un capo all’altro.

Per il lato scuro di questa famiglia da solo, vedi [i gradienti neri](https://gradiently.design/it/guide/black-gradient) e [i gradienti grigi](https://gradiently.design/it/guide/grey-gradient). Per come si relazionano i passaggi, [tinte, toni e sfumature](https://gradiently.design/it/guide/tints-tones-shades) è la lettura di base.

## Come fare un gradiente monocromatico in CSS

Il modo più semplice per tenere una sola tinta è scrivere i punti in oklch e cambiare solo il primo numero, la luminosità. L’angolo della tinta resta fisso, quindi il colore non può vagare, e oklch distribuisce uniformemente la luminosità, così la sfumatura sale a passo costante. [OKLCH spiegato](https://gradiently.design/it/guide/oklch-explained) tratta il formato.

```css
.hero {
  /* one hue (264, a deep blue), lightness only */
  background: linear-gradient(
    in oklch 170deg,
    oklch(0.18 0.08 264) 0%,
    oklch(0.42 0.16 264) 55%,
    oklch(0.86 0.06 264) 100%
  );
}

.mono {
  /* true greyscale: chroma 0 */
  background: linear-gradient(
    180deg,
    oklch(0.12 0 0) 0%,
    oklch(0.55 0 0) 100%
  );
}
```

Cambia il numero della tinta (264) per spostare l’intero gradiente su un altro colore. La saturazione cala sul lato chiaro, come nella luce reale.

1. **Scegli la tinta** Scegli un colore e trova il suo angolo di tinta. Un blu sta intorno a 260, un verde intorno a 145, un rosso intorno a 25.
2. **Imposta i punti più scuro e più chiaro** Tieni il lato scuro sopra il nero puro e quello chiaro sotto il bianco puro, a meno che tu non voglia un bordo netto. Una luminosità da 0,15 a 0,9 è un intervallo comodo.
3. **Posiziona il punto centrale con intenzione** Spostalo verso il lato che vuoi far dominare. Un punto centrale al 30 per cento dà un riquadro per lo più chiaro; al 70 per cento, per lo più scuro. [I punti colore del gradiente](https://gradiently.design/it/guide/gradient-stops) ne mostra di più.
4. **Aggiungi la grana** Un tenue strato di rumore sopra il gradiente nasconde le bande e dà una sensazione materica.

## Perché i gradienti monocromatici scuri formano bande

La maggior parte degli schermi mostra 256 livelli per canale. Un gradiente dal nero `#000000` al grigio scuro `#282828` ha solo 40 gradini distinti con cui lavorare. Stiralo su un hero largo 1920 pixel e ogni gradino diventa una striscia di 48 pixel, che l’occhio nota facilmente al buio. I gradienti multicolore lo nascondono perché i canali cambiano in momenti diversi; un gradiente monocromatico cambia tutti e tre insieme, quindi le bande si allineano.

### Bande

- Dal quasi nero al grigio scuro su uno schermo intero
- Forte compressione JPEG in esportazione
- Superficie digitale perfettamente pulita
- Sfumatura lunga e a basso contrasto con pochi punti

### Liscio

- Un intervallo di luminosità più ampio, o una distanza più breve
- PNG, o un’impostazione di alta qualità
- Un leggero strato di grana sopra
- Una luce radiale che cambia più in fretta vicino al centro

[Le bande nei gradienti](https://gradiently.design/it/guide/gradient-banding) e [i gradienti con grana](https://gradiently.design/it/guide/grainy-gradients) approfondiscono la soluzione, con il codice per uno strato di rumore SVG.

## Dove funzionano i gradienti monocromatici

Poiché portano un solo colore, i gradienti monocromatici lasciano guidare testo e fotografia. Vanno bene per lanci di prodotti di lusso, studi di architettura, uscite musicali e qualsiasi brand la cui identità sia un colore solo. Imposta le parole nel lato più chiaro o più scuro della stessa tinta, oppure in bianco o in nero, e il design si legge come un’unica decisione sicura.

Se ti serve un accento, prendilo fuori dalla tinta e usalo una volta sola: un’unica data arancione su un gradiente blu notte, o un prezzo rosso su grafite. Il gradiente resta monocromatico, e l’accento si prende tutta l’attenzione perché nient’altro ci compete.

Una copertina di album quadrata in toni di nero profondo e carbone con una sola parola in caratteri chiari

Una copertina quadrata di 1080×1080, quasi tutta ombra, con la luce che sale da un bordo.

Un hero largo per il sito di uno studio di architettura su un gradiente scuro a colore singolo

Un hero per sito web di 1920×1080: lo stesso approccio silenzioso a colore singolo su un riquadro molto più largo.

Uno sfondo monocromatico in Gradiently può anche muoversi: un Mark rende la sua luce dal vivo, quindi un gradiente a colore singolo può scorrere lentamente dietro le parole e, con Pro, si esporta come loop senza interruzioni in ogni formato che disegni.

## FAQ

### Che cos’è un gradiente monocromatico?

Un gradiente che fonde una sola tinta attraverso le sue stesse sfumature, dallo scuro al chiaro, oppure va dal nero al bianco attraverso i grigi.

### Un gradiente monocromatico è la stessa cosa di una combinazione di colori monocromatica?

No. Una combinazione monocromatica è una palette di una tinta usata in un design; un gradiente monocromatico è una sfumatura continua di una sola tinta.

### Come faccio un gradiente a colore singolo in CSS?

Scrivi i punti in oklch e cambia solo la luminosità, per esempio da `oklch(0.18 0.08 264)` a `oklch(0.86 0.06 264)`. La tinta resta fissa, quindi il colore non può scivolare.

### Perché il mio gradiente nero ha delle strisce?

I toni scuri hanno pochissimi gradini distinti su uno schermo a 8 bit, quindi la sfumatura mostra bande. Aggiungi un leggero strato di grana, allarga l’intervallo di luminosità o esporta in PNG.

### Qual è il codice di un gradiente bianco e nero?

`linear-gradient(180deg, #000000 0%, #ffffff 100%)` è la versione semplice. Per un aspetto più ricco, addensa i punti verso il lato scuro e fermati prima del bianco puro.