# Gradienti sognanti: pastelli velati e luce morbida

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

I gradienti sognanti sembrano la prima luce attraverso una tenda: pallidi, velati e appena caldi. Ecco cosa li fa funzionare, otto codici da copiare e l’inchiostro che si legge sopra.

## The short version

- Un gradiente sognante usa colori chiari e poco saturi, vicini per tonalità, fusi senza bordi netti.
- La sensazione sognante nasce dalla luce: un’area morbida e luminosa, fuori centro, che sfuma in un fondo velato.
- I gradienti sognanti si leggono meglio con un inchiostro profondo e tinto, come prugna o ardesia, anziché con testo bianco o nero puro.
- Sfumare in OKLCH mantiene puliti i colori chiari nel mezzo, dove una miscela sRGB può diventare gessosa o grigia.
- Una grana fine evita che i gradienti chiari mostrino bande quando vengono compressi per i social.

Un **gradiente sognante** è una miscela chiara e velata di colori vicini, lilla che passa a pesca, rosa tenue a crema, illuminata da un punto morbido così da sembrare luce e non vernice. Tre cose lo fanno funzionare: tinte poco sature, bordi così morbidi che non si vede dove finisce un colore e un nucleo luminoso fuori centro. Qui sotto trovi otto codici da copiare, un metodo per costruirne uno tuo e l’inchiostro che mantiene leggibili le parole su qualcosa di così chiaro.

## Cosa rende sognante un gradiente

Sognante è un’atmosfera, quindi conviene dare un nome alle parti. Un gradiente sognante è quasi tutto molto chiaro: quasi ogni suo colore passerebbe per bianco in una stanza poco illuminata. Le tonalità sono vicine, così la miscela non passa mai per il grigio. E la luce ha una direzione. Un’area è più luminosa e calda, come se il sole fosse appena fuori dal riquadro, e tutto il resto si allontana da lei nella foschia.

- Crema del mattino: #fdf6f0
- Velo rosa tenue: #fbe3e8
- Foschia lilla: #efe1fb
- Cielo polvere: #dde7fb
- Luce pesca: #fde8d4
- Inchiostro prugna: #4a3352

Cinque tinte che stanno bene insieme e un inchiostro profondo. Le tinte hanno la stessa luminosità, quindi due qualsiasi si fondono in modo pulito; la prugna è per le parole.

Confrontalo con un [gradiente pastello](https://gradiently.design/it/guide/pastel-gradients), che può essere piatto e allegro, o con un [gradiente sfocato](https://gradiently.design/it/guide/blurry-gradient), che può essere di qualsiasi colore. Il sognante sta nel mezzo: colori pastello, luce sfocata e un po’ di foschia sopra.

## Codici di gradienti sognanti da copiare

Ognuno è un singolo valore CSS. I gradienti radiali con un’ellisse fuori centro danno il senso di una fonte di luce; i due lineari servono per banner e strisce lunghe dove un radiale sembrerebbe sbilenco.

- Prima luce: `radial-gradient(ellipse 90% 70% at 30% 25%, #fde8d4 0%, #fbe3e8 35%, #efe1fb 70%, #f6f2fb 100%)`
- Mattino lilla: `radial-gradient(ellipse 80% 80% at 70% 30%, #fbe3e8 0%, #efe1fb 45%, #dde7fb 100%)`
- Bagliore dalla finestra: `radial-gradient(ellipse 100% 70% at 50% 0%, #fff4e6 0%, #fde2e4 40%, #e9e3f7 100%)`
- Foschia marina: `radial-gradient(ellipse 85% 75% at 25% 70%, #e0f2f1 0%, #e6e9fb 45%, #f5e9f7 100%)`
- Foschia dell’ora d’oro: `radial-gradient(ellipse 90% 80% at 65% 60%, #fcefd8 0%, #f8dde0 40%, #e8dcef 80%, #dcd6ea 100%)`
- Madreperla: `linear-gradient(160deg in oklch, #f9e7ef 0%, #ece3fa 50%, #dfeafb 100%)`
- Crepuscolo di nuvole: `linear-gradient(180deg, #dfe6f7 0%, #ecdff3 45%, #fbe6dc 100%)`
- Lavanda al chiaro di luna: `radial-gradient(ellipse 80% 70% at 40% 35%, #f3e8ff 0%, #d9d3f2 45%, #b8b6dc 100%)`

Otto gradienti sognanti. Il punto più scuro di ciascuno è comunque chiaro, ed è ciò che mantiene morbida l’atmosfera.

Lavanda al chiaro di luna è l’unico con un bordo appena più profondo. Si adatta a temi serali, app per il sonno e playlist di ninne nanne, dove la crema pura sarebbe troppo luminosa.

## Come costruire il tuo gradiente sognante

1. **Scegli una famiglia di tonalità** Scegli due o tre tonalità entro circa un quarto di giro del cerchio cromatico: rosa, lilla e azzurro, oppure pesca, rosa tenue e lilla. Gli opposti come pesca e azzurro si incontrano nel grigio, il problema descritto in [gradienti fangosi](https://gradiently.design/it/guide/muddy-gradients).
2. **Alza la luminosità, abbassa la saturazione** Porta ogni colore vicino al bianco. In OKLCH punta a una luminosità intorno a 0,92-0,96 e a una croma sotto circa 0,05. Il colore deve essere un suggerimento, non una dichiarazione.
3. **Posiziona la luce** Metti il punto più caldo e chiaro al centro di un’ellisse e sposta quel centro fuori dalla metà, di solito in un angolo alto. È la luce che arriva da qualche parte a trasformare il pallido in sognante.
4. **Allunga i punti di colore** Distribuisci i punti in largo, così nessuna banda sia più stretta di un terzo del riquadro. Punti troppo ravvicinati creano anelli, e gli anelli rompono la foschia.
5. **Aggiungi un soffio di grana** Uno strato di grana fine a bassissima opacità dà alla superficie l’aspetto di pellicola o carta e nasconde il banding. [Gradienti granulosi](https://gradiently.design/it/guide/grainy-gradients) mostra come.

Costruito con i passaggi: `radial-gradient(ellipse 95% 75% at 28% 22%, oklch(0.97 0.03 60) 0%, oklch(0.94 0.04 10) 40%, oklch(0.92 0.045 300) 75%, oklch(0.93 0.035 260) 100%)`

Luce pesca in alto a sinistra, rosa tenue, poi lilla e un lieve azzurro al bordo opposto. Ogni punto supera 0,9 di luminosità.

## Uno sfondo a gradiente sognante in CSS

Un gradiente radiale dà una luce. Due o tre, sovrapposti a una base chiara, danno la qualità fluttuante e nuvolosa che si intende con sognante. Sfuma in OKLCH perché il mezzo resti pulito; [interpolazione dei gradienti](https://gradiently.design/it/guide/gradient-interpolation) spiega perché.

```css
.dreamy {
  min-height: 100vh;
  background-color: #f6f2fb; /* fallback */
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 15% in oklch, #fde8d4 0%, transparent 70%),
    radial-gradient(ellipse 55% 60% at 85% 35% in oklch, #efe1fb 0%, transparent 70%),
    radial-gradient(ellipse 70% 55% at 50% 100% in oklch, #dde7fb 0%, transparent 70%),
    linear-gradient(170deg, #fbf3f6 0%, #f3eefb 100%);
}
```

Tre luci morbide su una base chiara: pesca in alto a sinistra, lilla a destra, azzurro polvere che sale dal basso.

> **I gradienti chiari mostrano il banding per primi** Le miscele molto chiare hanno pochi valori di colore distinti tra i punti, quindi una forte compressione le trasforma in strisce visibili. Esporta in PNG per i post social e aggiungi grana. [Banding nei gradienti](https://gradiently.design/it/guide/gradient-banding) copre i rimedi.

## Come mettere il testo su un gradiente sognante

Il testo bianco scompare su un gradiente sognante e il nero puro appare duro, come se qualcuno avesse timbrato un modulo su un acquerello. La risposta è un inchiostro profondo della stessa famiglia: prugna su una miscela rosa e lilla, blu ardesia su una nebbiosa, un marrone caldo sulla pesca. Si legge bene e continua a sembrare parte dell’immagine.

### Da evitare

- Testo bianco o grigio chiaro
- Nero puro in un peso marcato
- Il nucleo più luminoso dietro il titolo
- Corsivo sottile in piccole dimensioni
- Un riquadro o un alone dietro le parole per recuperare il contrasto

### Da fare

- Un inchiostro profondo e tinto: prugna, ardesia, cacao
- Pesi regular o medium con spaziatura generosa
- Parole nella parte più calma e uniforme della foschia
- Un serif o un sans morbido a una misura sicura
- Contrasto verificato dove ogni riga sta davvero

Un post con citazione sognante e chiara dove la parte più luminosa del gradiente sta dietro il testo e lo schiarisce

Il nucleo luminoso finisce dietro le parole e la riga si indebolisce.

Lo stesso post con citazione sognante con una zona più calma del gradiente dietro il testo, che ora si legge chiaramente

Lo stesso post con la zona calma dietro le parole e un inchiostro più profondo.

Qui Gradiently si guadagna il posto. Un Mark sa dove sono le parole: sposta la sua zona più calma dietro di esse, approfondisce i colori vicino alle lettere e sceglie inchiostro chiaro o scuro riga per riga dalla propria palette, così uno sfondo morbido non costa mai leggibilità. Per le regole generali leggi [testo su un gradiente](https://gradiently.design/it/guide/text-on-gradient).

## Dove funzionano i gradienti sognanti

Il sognante appare gentile, personale e senza fretta. Questo lo rende giusto per alcuni brand e sbagliato per altri. Un conto alla rovescia di sconti nella foschia lilla appare confuso; il lancio di un prodotto per la pelle è esattamente al suo posto.

- **Benessere e cura della pelle:** novità di prodotto, routine e citazioni, di solito come post Instagram 1080×1350.
- **Matrimoni e inviti:** un invito 5×7 pollici a 1500×2100 con una velatura pesca e rosa tenue e un nome in serif.
- **Musica e audio:** un canvas Spotify a 1080×1920 o una copertina Apple Podcasts a 3000×3000 per programmi di calma, sonno o ambient.
- **Diari e newsletter:** un’intestazione di post Substack a 1456×816 che dà un tono quieto prima della prima parola.
- **Sfondi per telefono e storie:** abbastanza morbidi da stare dietro icone o sticker senza contrastarli.

Una copertina quadrata di podcast intitolata Giardino di notte su uno sfondo sognante lavanda e pesca

Una copertina di podcast a 3000×3000. Il colore sognante dice all’ascoltatore come suona il programma prima che legga il titolo.

Se il sognante sta diventando lo stile del tuo brand e non di un solo post, considera di renderlo qualcosa che nessun altro possa usare. Ogni Mark su Gradiently ha un solo proprietario alla volta, quindi un lilla velato che riservi resta tuo, creato da zero a ogni misura in cui progetti. Per la famiglia più ampia di stili morbidi, vedi [gradienti aurora](https://gradiently.design/it/guide/aurora-gradients).

## FAQ

### Quali colori fanno un gradiente sognante?

Tinte chiare e poco sature, vicine tra loro sul cerchio cromatico: rosa tenue, lilla, azzurro polvere, pesca e crema. Mantieni ogni punto molto chiaro.

### Qual è la differenza tra un gradiente pastello e uno sognante?

Pastello descrive i colori. Sognante aggiunge luce morbida e direzionale e foschia, così il gradiente sembra illuminato e non piatto.

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

Un inchiostro profondo della stessa famiglia, come prugna, blu ardesia o cacao. Il bianco scompare sugli sfondi chiari e il nero puro può risultare duro.

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

Le miscele chiare hanno pochi passaggi di colore tra i punti, quindi la compressione li mostra come bande. Esporta in PNG, allarga i punti e aggiungi una grana fine.

### Come creo un gradiente sognante in CSS?

Sovrapponi due o tre gradienti radiali fuori centro che sfumano in trasparente su una base lineare chiara, e fondili `in oklch` per mantenere puliti i mezzi.