# Sfondo gradiente scuro: profondità senza cupezza

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

Un gradiente scuro può sembrare una scena notturna di lusso oppure uno schermo torbido con la luminosità abbassata. La differenza sta in poche scelte, tutte facili da copiare.

## The short version

- Un buon sfondo con gradiente scuro parte da un quasi nero tinto e non dal nero puro, poi aggiunge un solo colore acceso che ne emerge.
- I gradienti scuri risultano cupi quando non hanno una fonte di luce, non hanno colore nei neri e non hanno contrasto tra zone scure e zone illuminate.
- I gradienti scuri soffrono di banding più di ogni altro tipo, quindi quasi sempre servono una grana fine e un’esportazione curata.
- Il testo chiaro su un gradiente scuro va messo nella zona più scura e deve rispettare un contrasto di almeno 4,5:1 per il testo corrente.
- Un bianco sporco e neri leggermente schiariti affaticano meno gli occhi del bianco puro su nero puro.

Un buon **sfondo con gradiente scuro** è un quasi nero tinto da cui esce un solo colore luminoso, come se in una stanza buia fosse accesa una sola lampada. La tinta dà profondità ai neri, il colore acceso dà all’occhio un punto in cui andare, e la grande area scura fa sembrare nitido il testo bianco. Senza queste tre cose, un gradiente scuro sembra solo uno schermo spento a metà.

## Parti da un quasi nero tinto

Il nero puro `#000000` è un vicolo cieco: non c’è nulla da cui sfumare, e qualsiasi colore accanto sembra incollato. Un quasi nero con una punta di tinta dà al gradiente una famiglia di cui far parte. I neri bluastri sono freddi e tecnici, quelli violacei danno un tono di lusso, quelli verdi sanno di natura e i marroni caldi ricordano pelle e legno. Scegli la tinta che si accorda con il colore che vuoi accendere.

- Nero bluastro: #0b0f1a
- Nero violaceo: #120b1a
- Nero verdastro: #0a1411
- Nero terra d’ombra: #160c0a
- Nero neutro: #0f0f10

Cinque quasi neri. Affiancati le tinte si vedono bene; da soli sembrano neri con un’atmosfera.

## Aggiungi un solo colore acceso

Il colore acceso trasforma il buio in atmosfera. Mettilo fuori centro, di solito vicino a un bordo o a un angolo, così si legge come una fonte di luce. Tienilo nella stessa famiglia della tinta: luce viola su nero violaceo, verde acqua su nero bluastro. Un colore basta quasi sempre. Due possono funzionare se sono vicini nel cerchio cromatico. Oltre, si passa a un locale notturno, il che va bene se stai progettando proprio quello: vedi i [gradienti neon](https://gradiently.design/it/guide/neon-gradients).

- Lampada viola: `radial-gradient(circle at 80% 20%, #6d28d9 0%, #2e1065 30%, #0c0a1d 70%)`
- Orizzonte verde acqua: `linear-gradient(180deg, #030712 0%, #042f2e 65%, #0f766e 100%)`
- Bagliore di brace: `radial-gradient(ellipse at 50% 110%, #ea580c 0%, #7c2d12 30%, #1c0a05 65%, #0c0605 100%)`
- Ora blu: `linear-gradient(160deg, #020617 0%, #0f172a 45%, #1e3a8a 100%)`
- Fumo rosa: `radial-gradient(circle at 20% 80%, #be185d 0%, #4a044e 35%, #0f0710 75%)`
- Notte di muschio: `linear-gradient(135deg, #050a07 0%, #0f2419 55%, #166534 100%)`

Sei gradienti scuri, ognuno un quasi nero tinto con un solo colore acceso. Gran parte di ogni campione resta scura.

## Perché certi gradienti scuri sembrano cupi

### Cupo

- Nero puro che sfuma in grigio scuro
- Luce distribuita in modo uniforme, senza una fonte
- Il colore acceso spento verso il grigio
- Strisce visibili lungo la sfumatura scura
- Testo grigio su un fondo grigio-nero

### Ricco

- Un quasi nero tinto con una tinta chiara
- Una sola luce, fuori centro, che sfuma
- Il colore acceso resta saturo nel punto più luminoso
- Grana fine su tutta la superficie
- Testo bianco sporco nella zona più scura

L’errore più comune è mescolare il colore acceso verso il grigio mentre scende al nero. Mantieni alta la saturazione mentre si scurisce: il viola deve diventare viola più profondo, poi nero violaceo, mai grigio. Sfumare in OKLCH aiuta; i [gradienti sporchi](https://gradiently.design/it/guide/muddy-gradients) spiegano perché.

## Banding: il rischio maggiore del gradiente scuro

I gradienti scuri coprono solo un piccolo intervallo di valori, spesso una dozzina o due per canale, e siamo molto sensibili ai piccoli salti tra toni scuri. Una sfumatura scura e liscia su tutto lo schermo è quindi la ricetta perfetta per strisce visibili. Tre abitudini la evitano: dare alla sfumatura abbastanza intervallo, aggiungere una grana fine ed esportare senza compressione pesante. I dettagli sono in [banding nei gradienti](https://gradiently.design/it/guide/gradient-banding) e [gradienti granulosi](https://gradiently.design/it/guide/grainy-gradients).

> **Controlla su un telefono** Un banding invisibile su un monitor calibrato può essere evidente su un telefono con la luminosità al massimo, dopo che una piattaforma social ha ricompresso l’immagine. Controlla sempre la versione caricata.

## Il testo su un gradiente scuro

Gli sfondi scuri sono generosi con il testo, ma solo nelle zone scure. Tieni le parole lontane dal colore acceso, dove il contrasto cala. Per i passaggi lunghi usa un bianco sporco invece del bianco puro, perché il bianco puro su quasi nero può abbagliare. E misura: le WCAG chiedono almeno 4,5:1 per il testo corrente e 3:1 per il testo grande, e puoi verificarlo con il [WebAIM contrast checker](https://webaim.org/resources/contrastchecker/).

| Colore del testo | Su `#0b0f1a` | Da usare per |
| --- | --- | --- |
| `#ffffff` bianco | Circa 19:1 | Titoli ed etichette brevi |
| `#e5e7eb` bianco sporco | Circa 15:1, più morbido | Testo corrente e letture lunghe |
| `#9ca3af` grigio medio | Circa 7,5:1, supera AA | Didascalie e testo secondario |
| `#4b5563` grigio scuro | Circa 2,5:1, non supera | Da evitare per tutto ciò che va letto |

Colori del testo su un fondo nero bluastro. Controlla sempre il contrasto nel punto più chiaro dietro le parole, non in quello più scuro.

Una copertina quadrata intitolata Dopo mezzanotte in cui un forte bagliore sta dietro le parole

La luce passa dritta dietro il titolo e lo appiattisce.

La stessa copertina quadrata con la parte più scura del gradiente dietro il titolo

Con il fondo scuro dietro il titolo, la luce lo incornicia invece di schiacciarlo.

## Dove funzionano meglio gli sfondi con gradiente scuro

I gradienti scuri vanno bene per tutto ciò che succede di notte, ha un tono premium o ha bisogno di un colore che brilli: musica ed eventi, cinema e giochi, lanci tecnologici, profumi e distillati, e portfolio in cui il lavoro deve essere la cosa più luminosa della pagina. Aiutano anche la fotografia di prodotto, perché un oggetto illuminato su fondo scuro sembra prezioso.

- **Copertine e poster:** un fondo scuro fa del titolo luminoso l’eroe
- **Storie e Reel:** i fotogrammi scuri a schermo intero sono cinematografici su un telefono
- **Slide:** testo chiaro su scuro riposa di più in una stanza in penombra del testo scuro su bianco
- **Hero dei siti web:** una hero scura fa sembrare intenzionale la prima schermata; vedi [sfondi per la hero del sito](https://gradiently.design/it/guide/website-hero-background)

Vanno meno bene dove si legge a lungo su carta, o dove un brand si fonda su luce del giorno, freschezza o gioco. Lì un fondo chiaro con un solo colore morbido fa lo stesso lavoro.

## Uno sfondo con gradiente scuro in CSS

```css
.dark-hero {
  background-color: #0b0f1a; /* fallback */
  background-image:
    radial-gradient(circle at 85% 15%, #1d4ed8 0%, transparent 45%),
    linear-gradient(180deg, #0b0f1a 0%, #0f172a 100%);
  color: #e5e7eb;
}

.dark-hero h1 {
  color: #ffffff;
}
```

Un fondo nero bluastro con una luce blu in alto a destra, testo corrente bianco sporco e titoli bianchi. Aggiungi uno strato di grana per finire.

Se stai progettando un’intera interfaccia in modalità scura e non un solo sfondo, vedi [design in dark mode](https://gradiently.design/it/guide/dark-mode-design). Molti Mark del Mercato sono costruiti su fondi scuri e fanno spazio alle tue parole in automatico, spostando la loro zona più calma dietro il testo.

## FAQ

### Come faccio a ottenere un bello sfondo con gradiente scuro?

Usa un quasi nero tinto invece del nero puro, aggiungi un colore acceso fuori centro della stessa famiglia e chiudi con una grana fine.

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

Le sfumature scure coprono pochissimi valori di colore, quindi i salti sono ampi e facili da vedere. Aggiungi grana, allarga l’intervallo ed esporta in alta qualità.

### Che colore di testo funziona su un gradiente scuro?

Bianco per i titoli e bianco sporco come `#e5e7eb` per il testo corrente, nella zona più scura. Verifica un contrasto di almeno 4,5:1 per il testo corrente.

### Devo usare il nero puro in un gradiente?

Raramente. Un quasi nero con una leggera tinta sfuma in modo più naturale e dà profondità al gradiente.

### Quali colori stanno bene con un gradiente nero?

Viola profondo, verde acqua, blu, arancio brace e rosa funzionano tutti come unico colore acceso su un quasi nero della stessa famiglia di tinta.