# Gradiente nero: come usare il nero quasi puro

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

Il nero puro è un buco nello schermo. I gradienti neri che sembrano costosi nascono da neri con un filo di colore dentro e da una luce che si muove.

## The short version

- Un gradiente nero è una sfumatura tra toni quasi neri, o dal nero verso un colore, che dà profondità ai design scuri invece di un vuoto piatto.
- I migliori gradienti neri evitano il #000000 puro e usano neri tinti con un pizzico di tinta, come il nero bluastro, l’espresso caldo o il melanzana.
- I gradienti scuri fanno banding con facilità perché tra i valori quasi neri ci sono pochi livelli di luminosità: di solito servono grana o un intervallo più ampio.
- Il testo su un gradiente nero si legge meglio in un bianco morbido, e il grigio per il testo secondario deve comunque avere un contrasto di almeno 4,5:1.
- I gradienti neri stanno bene in lanci, lusso, musica, vita notturna e prodotti in modalità scura, dove il fondo scuro fa brillare un solo colore d’accento.

Un **gradiente nero** è una sfumatura che passa tra toni quasi neri, o dal nero verso un colore, così un design scuro ha profondità e luce invece di un vuoto piatto. Quelli che sembrano costosi non usano quasi mai il `#000000` puro. Partono da un nero tinto, come `#0b0b10`, fanno variare la luminosità di pochi punti percentuali e aggiungono una sola fonte di colore o di luce da qualche parte nel campo.

Questa guida ti dà neri tinti, codici di gradienti neri da copiare, il rimedio al banding che affligge le sfumature scure e le regole per il testo. Per gli sfondi scuri in generale, vedi [sfondi con gradienti scuri](https://gradiently.design/it/guide/dark-gradient-backgrounds); per le basi di come funzionano le sfumature, parti da [che cos’è un gradiente](https://gradiently.design/it/guide/what-is-a-gradient).

## Perché il nero puro sembra piatto

Il `#000000` non ha tinta e non ha niente di più scuro a cui arrivare, quindi un design costruito su di lui non ha ombre, solo un’assenza. Nella vita reale niente è così nero: una stanza buia, un cielo di notte e un tessuto nero hanno tutti una traccia di colore e una lenta variazione di luminosità. L’occhio legge quella variazione come profondità.

- Nero puro: nessuna profondità: `linear-gradient(180deg, #000000 0%, #000000 100%)`
- Nero tinto: profondità: `linear-gradient(180deg, #1a1a22 0%, #0b0b10 55%, #060609 100%)`

Affiancate, la versione tinta sembra una superficie su cui cade la luce. Il nero puro sembra un vuoto.

C’è anche un motivo pratico. Sugli schermi OLED i pixel di nero puro si spengono del tutto e su alcuni telefoni impiegano un attimo a riaccendersi, il che può lasciare una scia quando i contenuti scuri scorrono. Alzare il valore più scuro di qualche gradino sopra lo zero evita il problema e non ti costa nulla a livello visivo.

## Neri tinti: i colori dentro un buon nero

Un nero tinto è un colore molto scuro con un po’ di saturazione rimasta dentro. In HSL, tieni la luminosità tra circa il 4% e il 9% e lascia la saturazione tra il 15% e il 40%. La tinta decide l’atmosfera: i neri bluastri sanno di tecnico e di freddo, i marroni caldi di pelle e di caffè, il melanzana di sera.

- Inchiostro: #0b0b10
- Nero navy: #0a0e17
- Nero foresta: #0b120f
- Nero melanzana: #120b14
- Espresso: #14100d
- Grafite: #161618

Sei neri tinti. Da soli sembrano quasi identici; uno accanto all’altro e accanto a un colore, si vede la loro temperatura.

Se lavori in OKLCH, i numeri sono più facili da ragionare: luminosità intorno al 15%-20% e croma tra 0,005 e 0,025. L’Inchiostro qui sopra è `oklch(15.2% 0.011 285)`, un nero con un sussurro di blu. La nostra guida ai [codici colore](https://gradiently.design/it/guide/color-codes-explained) spiega come leggere questi valori.

## Codici di gradienti neri da copiare

Ognuno di questi tiene il valore più scuro sopra il nero puro e cambia la luminosità con dolcezza. Usali come sfondi interi, sezioni hero o fondi per slide, e scegli quello la cui temperatura si abbina al tuo colore d’accento.

- Discesa d’inchiostro: `linear-gradient(180deg, #1c1c24 0%, #0b0b10 60%, #070709 100%)`
- Faro su nero bluastro: `radial-gradient(120% 80% at 50% 0%, #1b2233 0%, #0a0e17 60%, #050608 100%)`
- Espresso caldo: `linear-gradient(180deg, #221b16 0%, #14100d 55%, #0a0806 100%)`
- Riflesso grafite: `linear-gradient(135deg, #0e0e10 0%, #2a2a2e 50%, #0e0e10 100%)`
- Dal nero al viola: `linear-gradient(160deg, #050507 0%, #12101c 55%, #2a1b4a 100%)`
- Dal nero alla brace: `linear-gradient(200deg, #0a0706 0%, #1d0d08 50%, #5a1a0c 100%)`
- Nero e oro: `linear-gradient(135deg, #0b0906 0%, #1c160c 60%, #6b5320 100%)`
- Verde acqua di mezzanotte: `linear-gradient(180deg, #03080a 0%, #08171b 55%, #0f3036 100%)`

Otto gradienti neri, tutti da copiare. I primi quattro restano vicini al neutro; gli ultimi quattro fanno salire un colore dal buio.

La direzione conta più sul nero che ovunque altrove, perché c’è così poco altro in gioco. Una luce che cade dall’alto sembra naturale e calma. Una luce che sale da un angolo in basso sembra un bagliore, come uno schermo o una fiamma, e porta l’occhio su quell’angolo. Per saperne di più, vedi [angoli dei gradienti](https://gradiently.design/it/guide/gradient-angle).

## Gradienti dal nero a un colore

I gradienti neri più d’effetto lasciano emergere un colore dal buio. Due regole li mantengono ricchi. Primo, dai al colore non più di un terzo del campo, così il nero resta la nota principale. Secondo, scurisci il colore verso il nero lungo la sua stessa tinta invece di farlo sfumare attraverso il grigio: un viola deve passare per un indaco profondo mentre scende, non per il carbone. Un centro grigio è la causa più comune dei [gradienti sporchi](https://gradiently.design/it/guide/muddy-gradients).

Bagliore viola dal nero: `radial-gradient(90% 70% at 80% 100%, #7c3aed 0%, #3b1d6e 30%, #140d24 60%, #08070c 100%)`

Il viola passa per ametista profondo e prugna mentre va verso il nero, così la sfumatura resta colorata invece che grigia.

I browser moderni possono fare parte del lavoro al posto tuo. Interpolare in OKLCH mantiene viva la croma del colore nei punti più scuri, e una riga di riserva semplice tiene coperti i browser più vecchi.

```css
.hero {
  /* Fallback for browsers without colour interpolation */
  background: linear-gradient(160deg, #08070c 0%, #140d24 55%, #7c3aed 100%);
  /* Blends through oklch, so the violet stays violet as it darkens */
  background: linear-gradient(in oklch 160deg, #08070c 0%, #140d24 55%, #7c3aed 100%);
}
```

La seconda dichiarazione vince dove `in oklch` è supportato e viene ignorata altrove.

## Come evitare il banding nei gradienti scuri

Gli schermi di solito mostrano 256 livelli per canale di colore. Un gradiente da `#0a0a0a` a `#1a1a1a` ha solo 16 di questi livelli con cui lavorare, quindi su un hero largo 1920 pixel ogni gradino è largo circa 120 pixel e si vedono le strisce. Questo è il [banding nei gradienti](https://gradiently.design/it/guide/gradient-banding), e i gradienti scuri ne soffrono più di tutti.

### Causa banding

- Un intervallo di luminosità lungo e molto stretto, come da #0a0a0a a #1a1a1a
- Grigi perfettamente neutri, dove i tre canali cambiano gradino nello stesso punto
- Esportare un gradiente scuro come JPEG compresso
- Allargare una piccola immagine di gradiente su uno schermo grande

### Lo risolve

- Un leggero strato di grana o di rumore sopra il gradiente
- Una lieve tinta, così i canali rosso, verde e blu cambiano gradino in punti diversi
- Esportare a dimensione piena in PNG, o generare il gradiente in tempo reale in CSS
- Un intervallo di luminosità più ampio, o una distanza più breve per la sfumatura

La grana è il rimedio più affidabile, perché spezza il bordo netto di ogni gradino in una texture che l’occhio rimescola. Bastano pochi punti percentuali di opacità. I [gradienti con grana](https://gradiently.design/it/guide/grainy-gradients) approfondiscono questo look; questo è il CSS minimo.

```css
.hero {
  position: relative;
  background: linear-gradient(180deg, #1c1c24 0%, #0b0b10 60%, #070709 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
```

Uno strato di rumore SVG all’8% di opacità nasconde i gradini in un gradiente scuro senza sembrare sporco.

## Testo e colore su un gradiente nero

Sui fondi neri quasi ogni testo chiaro supera il contrasto, quindi il rischio si sposta sul testo secondario. I grigi medi che vanno bene su un monitor luminoso possono scendere sotto il minimo di 4,5:1 per il testo corrente. Anche il bianco puro ha un costo: a qualcuno il bianco acceso su un quasi nero risulta duro nei passaggi lunghi, quindi un bianco caldo è più gentile e si legge comunque con nitidezza. Per le regole complete, vedi [il contrasto dei colori](https://gradiently.design/it/guide/color-contrast-accessibility).

| Colore del testo | Contrasto su #0b0b10 | Usalo per |
| --- | --- | --- |
| `#ffffff` bianco | 19.6:1 | Titoli brevi |
| `#f2efe9` bianco caldo | 17.1:1 | Titoli e testo corrente |
| `#a1a1aa` grigio chiaro | 7.7:1 | Testo secondario |
| `#8a8a93` grigio medio | 5.7:1 | Didascalie ed etichette |
| `#6b6b75` grigio spento | 3.7:1 | Solo testo grande, da 24 px in su |
| `#4a4a52` carbone | 2.2:1 | Decorazione, mai parole |

Rapporti di contrasto calcolati con la formula WCAG rispetto al nero Inchiostro. Sotto 4,5:1 è troppo debole per il testo corrente.

Un post verticale con le parole Dopo il tramonto in bianco caldo su un gradiente quasi nero, profondo e con una luce soffusa

Un campo quasi nero, una riga bianco caldo e un solo accento: l’impaginazione classica del gradiente nero.

## Dove i gradienti neri funzionano meglio

- **Lanci e rivelazioni**, dove un fondo scuro fa sembrare illuminato un prodotto o un titolo
- **Lusso, profumeria e gioielleria**, in coppia con un accento metallico come `#c9a96e`
- **Musica, vita notturna ed eventi**, con un colore saturo che sale da un angolo
- **Prodotti tech e per sviluppatori**, dove i neri bluastri sembrano precisi
- **Interfacce in modalità scura**, con due o tre neri tinti come livelli di superficie
- **Portfolio fotografici**, dove una cornice nera discreta lascia i colori alle immagini

In Gradiently, il Mercato ti permette di cercare i Mark con parole di colore come «quasi nero» o «nero e oro», e ogni Mark porta già grana e luce, quindi i problemi di banding e di piattezza descritti sopra sono risolti prima che tu cominci.

## FAQ

### Qual è il miglior codice esadecimale per un gradiente nero?

Parti da un nero tinto come `#0b0b10` (nero bluastro) o `#14100d` (espresso caldo) invece di `#000000`, e lascia che il punto più chiaro stia qualche gradino più in alto, come `#1c1c24`.

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

Tra i valori quasi neri ci sono pochissimi livelli di luminosità, quindi ogni gradino diventa una banda visibile. Aggiungi un leggero strato di grana, dai ai neri una lieve tinta o allarga l’intervallo di luminosità.

### Che colore di testo sta meglio su un gradiente nero?

Un bianco caldo come `#f2efe9` si legge con nitidezza e sembra più morbido del bianco puro. Tieni il grigio del testo secondario a un contrasto di 4,5:1 o superiore.

### Come faccio un gradiente dal nero a un colore che non sia sporco?

Scurisci il colore lungo la sua stessa tinta mentre va verso il nero, per esempio il viola passando per l’indaco profondo, invece di farlo sfumare attraverso il grigio. Interpolare in OKLCH nel CSS aiuta.

### Un gradiente nero va bene per la modalità scura?

Sì, se è sottile. Le superfici in modalità scura funzionano meglio come due o tre neri tinti a pochi punti percentuali di distanza, con l’eventuale gradiente visibile limitato alle grandi aree di sfondo.