# Gradienti sfocati: colore soft focus che sa di moderno

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

I gradienti sfocati sembrano colore visto attraverso un vetro smerigliato o un obiettivo fuori fuoco. Sono calmi, moderni e facili da fare male. Ecco il metodo, con i numeri.

## The short version

- Un gradiente sfocato si ottiene mettendo qualche forma morbida di colore su un fondo e sfocandole finché non restano bordi.
- I gradienti sfocati sono diversi dai gradienti aurora: l’aurora è fatta di nastri di luce su un cielo scuro, mentre un gradiente sfocato è colore diffuso senza direzione né struttura.
- Il raggio di sfocatura dev’essere grande rispetto alla tela, circa il 10-20 per cento del lato più corto, altrimenti le forme si leggono ancora come macchie.
- Tre o quattro colori vicini sulla ruota cromatica si sfocano in modo pulito; i colori opposti diventano grigi dove si sovrappongono.
- Il colore sfocato e liscio fa banding facilmente, quindi prima di esportare va messo sopra uno strato di grana fine.

Un **gradiente sfocato** è colore senza bordi: qualche forma morbida su un fondo, sfocata finché resta solo luce che scivola da una tinta alla successiva. Sembra una fotografia scattata attraverso un vetro smerigliato, o un obiettivo messo fuori fuoco su una città illuminata. Quella morbidezza è il motivo per cui va bene per app di benessere, musica, skincare, tecnologia calma e sfondi. Il metodo è semplice: prima le forme, poi molta sfocatura, poi la grana. I dettagli qui sotto fanno la differenza tra sognante e sbavato.

## Gradienti sfocati contro gradienti aurora e mesh

Questi tre si confondono perché sembrano tutti morbidi. Nascono da idee diverse, e scegliere quello giusto cambia il progetto.

| Stile | Che aspetto ha | Costruito da |
| --- | --- | --- |
| Gradiente sfocato | Colore diffuso, senza direzione, come soft focus | Forme su un fondo, molto sfocate |
| [Gradiente aurora](https://gradiently.design/it/guide/aurora-gradients) | Nastri o sipari di luce su un cielo scuro | Strisce allungate con un flusso chiaro |
| [Gradiente mesh](https://gradiently.design/it/guide/mesh-gradients) | Campi di colore lisci uniti su una griglia | Punti di colore fusi su una mesh |
| Gradiente lineare | Una rampa dritta da un colore a un altro | Punti lungo una linea |

Un gradiente sfocato non ha una struttura da seguire. Se vedi una direzione o una forma, è qualcos’altro.

## Come fare un gradiente sfocato

1. **Scegli un fondo** Un bianco sporco pallido per un effetto arioso, un inchiostro scuro per uno luminoso. Il fondo riempie ogni vuoto lasciato dalle forme.
2. **Scegli tre o quattro colori vicini** I colori vicini sulla ruota, come rosa, lilla e azzurro, si fondono in sfumature intermedie pulite. Leggi [i colori analoghi](https://gradiently.design/it/guide/analogous-colors) per altre combinazioni.
3. **Disegna forme grandi e sovrapposte** Da tre a cinque cerchi o ovali, ognuno a coprire da un quarto a metà della tela. Lascia che alcuni escano dai bordi.
4. **Sfoca con decisione** Applica una sfocatura gaussiana di circa il 10-20 per cento del lato più corto della tela. Su un post largo 1080 pixel, sono circa 110-220 pixel.
5. **Aggiungi la grana** Uno strato di rumore fine con opacità del 3-6 per cento nasconde il banding e impedisce che il risultato sembri plastificato.
6. **Controlla alla dimensione del telefono** Rimpiccioliscilo. Se una forma ha ancora un bordo visibile, sfoca di più o ingrandisci la forma.

## Ricette di colore per gradienti sfocati

Ogni campione approssima il look finito in un solo gradiente, così puoi copiarlo direttamente nel CSS o usare i colori come forme. I gradienti radiali ellittici con posizioni fuori centro si avvicinano sorprendentemente a una vera sfocatura.

- Foschia del mattino: `radial-gradient(ellipse 90% 70% at 25% 30%, #fbcfe8 0%, #e9d5ff 35%, #bfdbfe 70%, #f8fafc 100%)`
- Fioritura di pesca: `radial-gradient(ellipse 80% 90% at 70% 60%, #fde68a 0%, #fdba74 30%, #fda4af 60%, #fdf2f8 100%)`
- Nebbia di menta: `radial-gradient(ellipse 85% 75% at 35% 65%, #a7f3d0 0%, #99f6e4 30%, #bae6fd 65%, #f0f9ff 100%)`
- Bokeh notturno: `radial-gradient(ellipse 70% 80% at 65% 35%, #a78bfa 0%, #6366f1 30%, #1e1b4b 70%, #0b0a1a 100%)`
- Luci da club: `radial-gradient(ellipse 90% 80% at 30% 70%, #fb7185 0%, #c026d3 35%, #3b0764 72%, #12051f 100%)`
- Sfocatura lino: `linear-gradient(160deg, #e7e5e4 0%, #d6d3d1 30%, #fcd9bd 60%, #f5f5f4 100%)`

Tre chiari e tre scuri. Le sfocature chiare sono ariose ed editoriali; quelle scure sembrano luci viste fuori fuoco di notte.

Scegli la famiglia in base a ciò che ci sta sopra. Le sfocature chiare portano bene il testo scuro e vanno per skincare, cartoleria, benessere e copertine editoriali. Quelle scure fanno brillare il testo chiaro e vanno per vita notturna, musica ed eventi serali. Una sfocatura neutra come il lino funziona da sfondo discreto per foto di prodotto, dove il colore non deve mai competere con l’oggetto. Per altre palette morbide, vedi [i gradienti sognanti](https://gradiently.design/it/guide/dreamy-gradients).

## Quanta sfocatura serve a un gradiente sfocato

La maggior parte dei gradienti sfocati fallisce perché non è abbastanza sfocata. Una forma sfocata di 30 pixel su una tela di 1080 pixel è ancora una forma con un bordo morbido, che si legge come una macchia. Il look richiede una sfocatura tanto grande da non capire dove finisce una forma.

| Tela | Misura | Sfocatura di partenza |
| --- | --- | --- |
| Post Instagram | 1080×1350 | 110-220 px |
| Storia o sfondo del telefono | 1080×1920 | 110-220 px |
| Hero di un sito | 1920×1080 | 110-220 px |
| Miniatura YouTube | 1280×720 | 70-145 px |
| Poster A4 a 300 dpi | 2480×3508 | 250-500 px |

Punti di partenza al 10-20 per cento del lato più corto. Le forme più grandi richiedono meno sfocatura; quelle più piccole ne richiedono di più.

## Un gradiente sfocato in CSS

Sul web hai due strade. I gradienti radiali sovrapposti che sfumano in trasparente sono economici e si disegnano subito. Gli elementi realmente sfocati sembrano più morbidi e possono muoversi, ma costano di più da disegnare. Per uno sfondo statico, gli strati di solito bastano.

```css
/* Route 1: layered radial gradients, no filter */
.blurry {
  background-color: #f8fafc;
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 25%, #fbcfe8 0%, transparent 70%),
    radial-gradient(ellipse 55% 60% at 80% 30%, #e9d5ff 0%, transparent 70%),
    radial-gradient(ellipse 70% 55% at 50% 85%, #bfdbfe 0%, transparent 70%);
}

/* Route 2: real shapes, blurred */
.blurry-live {
  position: relative;
  overflow: hidden;
  background: #f8fafc;
}
.blurry-live .blob {
  position: absolute;
  width: 50vmax;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.8;
}
.blurry-live .blob:nth-child(1) { background: #fbcfe8; left: -10vmax; top: -10vmax; }
.blurry-live .blob:nth-child(2) { background: #e9d5ff; right: -12vmax; top: 0; }
.blurry-live .blob:nth-child(3) { background: #bfdbfe; left: 20%; bottom: -20vmax; }
```

La strada 1 è una foschia del mattino morbida e statica. La strada 2 usa tre cerchi sfocati che puoi muovere lentamente con transform.

Se ti serve un pannello smerigliato sopra uno sfondo sfocato e non lo sfondo stesso, si tratta di `backdrop-filter`, trattato in [il backdrop filter in CSS](https://gradiently.design/it/guide/css-blur-background).

## Perché i gradienti sfocati sembrano dozzinali, e il rimedio

### Sbavato

- Forme ancora visibili come macchie morbide
- Colori complementari che diventano grigi nella sovrapposizione
- Composizione uniforme e centrata
- Perfettamente liscio, con banding nelle sfumature
- Parole sopra la macchia più satura

### Sognante

- Una sfocatura così ampia che non sopravvive nessun bordo
- Tinte vicine che si fondono in sfumature intermedie pulite
- Una massa di colore dominante, fuori centro
- Grana fine su tutto
- Parole sull’area più pallida o più profonda

Il banding è quello che sorprende tutti, perché una sfocatura crea sfumature lunghe e dolci su molti pixel. Un po’ di grana lo risolve; [il banding nei gradienti](https://gradiently.design/it/guide/gradient-banding) ne spiega il motivo. E se due dei tuoi colori si incontrano nel grigio, sostituisci uno con un vicino, come descritto in [i gradienti fangosi](https://gradiently.design/it/guide/muddy-gradients).

Una storia verticale con le parole Inspira su uno sfondo sfocato morbido e pallido di rosa e lilla

Una storia a 1080×1920 per un’app di meditazione. Colore morbido, parole brevi, niente che abbia un bordo.

I Mark di Gradiently includono materiali morbidi e diffusi con la grana già integrata, e mantengono calma l’area dietro le tue parole, così un look sfocato non inghiotte mai il titolo. Puoi progettare gratis con qualsiasi Mark non riservato nello Studio.

## FAQ

### Come faccio un gradiente sfocato?

Metti da tre a cinque forme grandi in colori vicini su un fondo semplice, applica una forte sfocatura gaussiana di circa il 10-20 per cento del lato più corto della tela, poi aggiungi uno strato leggero di grana.

### Che differenza c’è tra un gradiente sfocato e un gradiente aurora?

Un gradiente aurora ha nastri di luce con un flusso chiaro, di solito su un cielo scuro. Un gradiente sfocato è colore diffuso senza direzione né struttura visibile.

### Posso fare un gradiente sfocato solo con il CSS?

Sì. Sovrapponi più gradienti radiali che sfumano in trasparente, oppure sfoca cerchi posizionati in modo assoluto con `filter: blur()`.

### Perché il mio gradiente sfocato mostra il banding?

Le sfumature lunghe e dolci hanno pochi passi di colore distinti, quindi mostrano strisce. Aggiungi grana fine ed esporta in PNG invece che in JPEG compresso.