# Gradienti malinconici: codici scuri ricchi di atmosfera

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

Scuro è facile. L’atmosfera è più difficile: nasce da dove cade la luce, da quanto colore trattieni e da cosa sono fatte le ombre. Dodici codici e il ragionamento che li sorregge.

## The short version

- Un gradiente malinconico è una sfumatura scura in cui gran parte del riquadro sta nell’ombra e il colore compare solo dove cade la luce.
- I gradienti malinconici usano colori attenuati, leggermente smorzati, anziché saturi, ed è per questo che sembrano cinematografici invece che rumorosi.
- Le ombre con un accenno di colore, come il nero bluastro o il nero prugna, sembrano più ricche del nero puro.
- Una luce calda su un fondo freddo è il modo più rapido di dare atmosfera a un gradiente scuro.
- I gradienti scuri formano più bande di quelli chiari, quindi aggiungi un po’ di grana ed esporta in PNG o in video di alta qualità.

Un **gradiente malinconico** è una sfumatura scura che si comporta come una stanza poco illuminata: gran parte del riquadro sta nell’ombra, una zona cattura la luce e i colori sono trattenuti anziché spinti. La ricetta è semplice da dire. Parti da un quasi nero con una tinta, aggiungi uno o due toni medi attenuati e lascia che una sola luce, spesso calda su un fondo freddo, dia vita alla superficie. Qui sotto trovi dodici codici da copiare, poi come costruire il tuo e mantenere leggibili le parole sopra.

## Cosa rende malinconico un gradiente, non solo scuro

Molti gradienti scuri sembrano piatti. Il blu notte che sfuma nel nero è scuro, ma non ha clima. L’atmosfera nasce da poche decisioni che fotografi e coloristi del cinema prendono d’istinto, e tu puoi prenderle di proposito.

- **Low key.** Circa tre quarti del riquadro sono ombra. La luce è l’eccezione, non la regola.
- **Una sola fonte.** La luce entra da un angolo o da un bordo, così l’occhio sa dov’è la finestra o la lampada.
- **Colore trattenuto.** I toni medi sono leggermente smorzati. Un verde acqua polveroso sembra più malinconico di uno brillante.
- **Ombre colorate.** Il punto più scuro è nero bluastro, nero verdastro o rosso bue, mai `#000000`.
- **Contrasto di temperatura.** Una piccola luce calda in una scena fredda, o il contrario, crea tensione.

### Scuro ma piatto

- Nero puro a un’estremità
- Accento brillante e saturo
- Luce distribuita uniformemente nel riquadro
- Diagonale dritta, da un angolo all’altro
- Superficie digitale perfettamente liscia

### Malinconico

- Ombra tinta che ha ancora una tonalità
- Accento attenuato, leggermente smorzato
- Luce raccolta in un punto
- Caduta radiale o morbida e inclinata
- Grana fine, come la pellicola

## Dodici codici di gradienti malinconici

Ognuno è un singolo valore CSS che puoi incollare in `background`. Sono raggruppati liberamente per temperatura: prima quelli freddi e tempestosi, poi quelli caldi, da lampada, poi qualcuno a metà strada.

- Tempesta: `linear-gradient(160deg, #2c3a4a 0%, #1b2330 45%, #0d1117 100%)`
- Petrolio di mezzanotte: `radial-gradient(ellipse at 70% 30%, #1f5c63 0%, #0f2e36 45%, #050f14 90%)`
- Mare profondo: `linear-gradient(200deg, #10314a 0%, #0a1a2f 50%, #04080f 100%)`
- Foresta al crepuscolo: `linear-gradient(180deg, #2f4a3a 0%, #17291f 50%, #070d0a 100%)`
- Rosso bue: `radial-gradient(circle at 30% 20%, #6b1d2a 0%, #3a0f18 45%, #120609 85%)`
- Ultima brace: `radial-gradient(circle at 80% 85%, #b4532a 0%, #4a1d12 35%, #120806 75%)`
- A lume di candela: `radial-gradient(circle at 50% 100%, #8a4b22 0%, #3d2115 40%, #0f0a08 80%)`
- Lampione: `radial-gradient(circle at 20% 15%, #c98a3a 0%, #4b3220 30%, #14110f 70%)`
- Prugna livida: `linear-gradient(135deg, #3b1f3f 0%, #241329 50%, #0e0710 100%)`
- Inchiostro e viola: `radial-gradient(circle at 75% 20%, #4c2a7a 0%, #1d1433 45%, #0a0812 85%)`
- Muschio e bronzo: `linear-gradient(150deg, #0c120d 0%, #2a3320 55%, #7a5a2e 100%)`
- Rosa grafite: `linear-gradient(170deg, #4a3438 0%, #2b2628 55%, #161214 100%)`

Dodici gradienti malinconici. Nota che nessuno finisce nel nero puro e nessuno usa un colore completamente saturo.

Se vuoi qualcosa di più vicino a una notte limpida che a una tempestosa, [i gradienti del cielo notturno](https://gradiently.design/it/guide/night-sky-gradient) tendono più al blu e aggiungono le stelle. Per un colore più profondo e lucido, con più saturazione, [i toni gioiello](https://gradiently.design/it/guide/jewel-tone-colors) stanno un gradino sopra tutto ciò che c’è qui.

## Una palette di colori malinconica da cui partire

Quando crei la tua, lavora con una palette anziché con due colori. Cinque bastano: un fondo, due gradini d’ombra, un tono medio attenuato e una luce. La luce è l’unico colore a cui è concessa una vera luminosità, e deve comparire in un’area piccola.

- Fondo notte: #0d1117
- Ardesia profonda: #1b2330
- Tempesta: #2c3a4a
- Grigio pioggia: #5b6b78
- Ambra di lampada: #c98a3a

Una palette fredda e piovosa con una sola luce calda. Sostituisci l’ambra con un rosa polveroso o con un pallido giallo al sodio e la storia cambia completamente.

Il motivo per cui la luce calda funziona così bene contro l’ombra fredda è spiegato in [temperatura del colore](https://gradiently.design/it/guide/color-temperature). Per altre serie già pronte, vedi [palette di colori scuri](https://gradiently.design/it/guide/dark-color-palettes).

## Come fare un gradiente malinconico in CSS

1. **Imposta un fondo con una tinta** Scegli un quasi nero con una tonalità dentro, come `#0b0d12` per un nero bluastro o `#120806` per un nero marrone caldo. Usalo anche come ripiego di `background-color`.
2. **Aggiungi il corpo dell’ombra** Stendi un lieve gradiente lineare tra due gradini scuri della stessa tinta. Dà profondità al riquadro prima che arrivi qualsiasi luce.
3. **Posiziona una luce** Aggiungi un gradiente radiale in un angolo che sfuma in `transparent` verso il 40 per cento. Tieni il suo colore attenuato e la sua opacità ben sotto il massimo.
4. **Aggiungi una controluce fredda** Facoltativamente, un secondo radiale più grande e più fioco nell’angolo opposto, nella famiglia fredda. Evita che il lato in ombra si spenga.
5. **Finisci con la grana** Uno strato di rumore fine a bassa opacità nasconde le bande e fa sentire la superficie come pellicola. [I gradienti con grana](https://gradiently.design/it/guide/grainy-gradients) ha il codice.

```css
.moody {
  background-color: #0b0d12; /* tinted ground and fallback */
  background-image:
    radial-gradient(circle at 78% 18%, rgba(201, 138, 58, 0.5) 0%, transparent 40%),
    radial-gradient(ellipse at 10% 100%, rgba(31, 58, 68, 0.8) 0%, transparent 55%),
    linear-gradient(165deg, #151a22 0%, #0b0d12 100%);
}
```

Un bagliore di lampione in alto a destra, una foschia verde acqua fredda in basso a sinistra e un corpo di ardesia. Tre strati, nessuna immagine.

> **I fondi scuri formano bande** Con così poca distanza tra i valori più scuri e più chiari, i gradienti malinconici mostrano bande a gradini su molti schermi e dopo la compressione. Aiutano la grana, le esportazioni in PNG e il non usare impostazioni JPEG troppo compresse. [Le bande nei gradienti](https://gradiently.design/it/guide/gradient-banding) spiega la soluzione nel dettaglio.

## Mettere le parole su uno sfondo malinconico

Il testo chiaro su fondo scuro si legge bene, finché non attraversa l’unica macchia luminosa su cui hai lavorato tanto. Pensa il titolo per il lato in ombra e tieni la luce lontana dalle parole anziché dietro di esse. Un bianco sporco morbido, come `#ece6dc`, sta più comodo su un fondo malinconico del bianco puro, che può sembrare duro.

Una storia verticale scura per un evento in cui la zona chiara dello sfondo sta dietro il titolo La serata tarda

Lo sfondo scorre dritto attraverso le parole, quindi la zona più luminosa può finire dietro il titolo.

La stessa storia scura per un evento con un’ombra calma dietro il titolo e il bagliore tenuto su un solo bordo

Qui il Mark sposta la sua zona più calma e scura dietro il testo, e la luce resta sul bordo.

La versione di destra è ciò che fa da solo un Mark di Gradiently: sa dove sono le parole, approfondisce il colore vicino alle lettere e sceglie testo chiaro o scuro riga per riga dalla propria palette, senza aggiungere riquadri o ombre. [Il testo su un gradiente](https://gradiently.design/it/guide/text-on-gradient) tratta la versione manuale.

## Dove i gradienti malinconici funzionano meglio

| Uso | Prova | Formato |
| --- | --- | --- |
| Storia per un evento tardivo o una serata in locale | Inchiostro e viola, Lampione | 1080×1920 |
| Copertina di podcast | Rosso bue, Rosa grafite | 3000×3000 |
| Poster del menu di un ristorante o di un bar | A lume di candela, Muschio e bronzo | A4, 2480×3508 |
| Hero del sito di uno studio o di un’agenzia | Tempesta, Petrolio di mezzanotte | 1920×1080 |
| Miniatura YouTube per un thriller o un saggio | Ultima brace, Mare profondo | 1280×720 |
| Copertina di una playlist Spotify | Foresta al crepuscolo, Prugna livida | 1080×1080 |

I gradienti malinconici vanno bene per tutto ciò che accade di notte, tutto ciò che vuole sembrare ponderato e tutto ciò che va ascoltato più che gridato.

Vanno bene per notte, musica, drink, cinema, profumi e lusso discreto. Vanno molto meno bene per una festa di bambini o per i saldi estivi. Per un’intera interfaccia in questo registro, [gli sfondi a gradiente scuro](https://gradiently.design/it/guide/dark-gradient-backgrounds) tratta le cure in più che richiedono gli schermi.

Se preferisci non regolare gli strati a mano, il Mercato ha Mark vivi esattamente in questo registro, che puoi cercare con parole come «verde petrolio intenso» o «rosso bue». Puoi progettare gratis con qualsiasi Mark non riservato, e riservarne uno significa che il poster di nessun altro avrà la stessa atmosfera.

## FAQ

### Quali colori compongono un gradiente malinconico?

Quasi neri con una tinta, come il nero bluastro o il nero prugna, uno o due toni medi attenuati come il verde acqua polveroso o l’ardesia, e una sola luce più calda, come l’ambra o la brace.

### In cosa un gradiente malinconico è diverso da uno scuro?

Un gradiente scuro deve solo essere scuro. Uno malinconico ha una fonte di luce chiara, colore trattenuto e ombre colorate, che gli danno atmosfera.

### Un gradiente malinconico dovrebbe usare il nero puro?

Di solito no. Un quasi nero con un accenno di tinta, come `#0b0d12`, sembra più ricco e si fonde più dolcemente con i colori intorno.

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

Sono le bande, che si vedono soprattutto nelle sfumature scure e sottili. Aggiungi una grana fine ed esporta in PNG o in video di alta qualità anziché in un JPEG compresso.

### Quale colore di testo funziona su un gradiente malinconico?

Di solito si legge meglio un bianco sporco morbido. Mettilo sul lato in ombra, lontano dalla zona più luminosa, e controlla il contrasto dove sta ogni riga.