# Gradiente mesh in CSS: come costruirlo con livelli radiali

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

In CSS non esiste mesh-gradient(). Ecco il metodo a livelli che ne crea uno convincente, la sfocatura e la grana che lo rifiniscono e quando un’immagine o uno shader sono la scelta migliore.

## The short version

- Il CSS non ha una funzione nativa per il gradiente mesh, quindi un gradiente mesh in CSS si costruisce sovrapponendo più gradienti radiali su un colore di base piatto.
- Ogni livello è una pozza di colore nella sua posizione che sfuma verso il trasparente, e le sovrapposizioni creano la sfumatura morbida e multidirezionale di una mesh.
- Un filtro di sfocatura su uno pseudo-elemento ammorbidisce ulteriormente le pozze, e un debole livello di rumore nasconde il banding.
- I gradienti a livelli statici sono economici da disegnare, ma le grandi sfocature e i livelli animati ridisegnano spesso e vanno tenuti lenti, piccoli o facoltativi.
- Quando un design richiede molti punti di colore, forme deformate o movimento fluido a schermo intero, un’immagine esportata, un video o uno shader WebGL è di solito lo strumento migliore.

Un **gradiente mesh in CSS** è uno sfondo in cui il colore si sfuma in più direzioni insieme, come se pozze di pigmento si fossero impregnate l’una nell’altra. Il CSS non ha una funzione mesh, e i gradienti mesh un tempo abbozzati per l’SVG non sono mai arrivati nei browser, quindi la versione per il web è un’imitazione: da tre a cinque livelli `radial-gradient()` sovrapposti a un colore piatto, ciascuno che sfuma verso `transparent`. Fatta con cura, è abbastanza vicina da non far distinguere nulla, pesa poche centinaia di byte e resta nitida a qualsiasi dimensione.

Se vuoi prima la teoria del design, cos’è una mesh e perché sembra organica, leggi i [gradienti mesh](https://gradiently.design/it/guide/mesh-gradients). Questa guida riguarda come costruirne uno nel codice.

## Come funziona il metodo a livelli

Ogni livello è un punto di colore. La sua posizione è il valore `at`, la sua portata è la distanza di dissolvenza e la sua forza è l’alfa del colore. Poiché il primo gradiente in `background-image` viene dipinto in cima, qui l’ordine conta meno di quanto si pensi: ogni livello è per lo più trasparente, quindi si mescolano dove si sovrappongono. Il `background-color` di base si vede ovunque nessuna pozza arrivi.

- Pozza 1: viola, in alto a sinistra: `radial-gradient(circle at 15% 20%, #7c3aed, #0b1026 55%)`
- Pozza 2: rosa, in alto a destra: `radial-gradient(circle at 85% 25%, #ec4899, #0b1026 50%)`
- Pozza 3: ciano, in basso: `radial-gradient(ellipse at 60% 90%, #06b6d4, #0b1026 60%)`
- Pozza 4: accento ambra: `radial-gradient(circle at 25% 80%, #f59e0b, #0b1026 45%)`

I quattro punti di colore di una mesh, ciascuno mostrato da solo sulla base blu notte. Sovrapposti, si fondono in un unico campo.

```css
.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(circle at 15% 20%, rgb(124 58 237 / 0.85), transparent 55%),
    radial-gradient(circle at 85% 25%, rgb(236 72 153 / 0.75), transparent 50%),
    radial-gradient(ellipse at 60% 90%, rgb(6 182 212 / 0.7), transparent 60%),
    radial-gradient(circle at 25% 80%, rgb(245 158 11 / 0.55), transparent 45%);
}
```

La pila completa. Cambia un solo valore `at` e l’intera composizione si riequilibra.

## Passo per passo: costruisci il tuo gradiente mesh in CSS

1. **Scegli uno sfondo** Scegli il colore piatto che si vede tra le pozze. Gli sfondi scuri fanno brillare le pozze; quelli chiari le fanno sembrare acquerello. Lo sfondo è anche la tua riserva se i gradienti falliscono.
2. **Scegli da tre a cinque colori affini** Le tonalità vicine si sfumano in modo pulito. Gli opposti, come blu e arancione, si incontrano in una macchia grigia. [Gradienti sporchi](https://gradiently.design/it/guide/muddy-gradients) spiega perché e come evitarlo.
3. **Metti le pozze fuori centro** Spingi i punti verso angoli e bordi, e lascia che almeno uno stia in parte fuori dal riquadro, come `at 110% 0%`. Le pozze centrate sembrano un bersaglio.
4. **Varia portata e forza** Dai a un colore la dissolvenza più ampia e l’alfa più alta, così guida. Tieni l’accento piccolo e più debole. Pozze uguali sembrano meccaniche.
5. **Sfuma in uno spazio colore migliore** Aggiungi `in oklab` a ogni livello, come in `radial-gradient(in oklab circle at 15% 20%, ...)`, dove supportato. Le sovrapposizioni restano più luminose che in sRGB.
6. **Finisci con la grana** Le grandi dissolvenze morbide fanno banding su molti schermi. Un debole strato di rumore lo risolve e dà un tocco di stampa; vedi più avanti.

## Sfumature più morbide con la sfocatura

Le dissolvenze radiali sono morbide ma le loro forme sono ovviamente rotonde. Una sfocatura ammorbidisce i cerchi rendendoli più organici. Metti i livelli su uno pseudo-elemento, sfocalo e ingrandiscilo con un `inset` negativo così i bordi sfocati non svaniscono nella pagina. `isolation: isolate` tiene lo `z-index` negativo dentro il componente.

```css
.mesh {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #0b1026;
}

.mesh::before {
  content: "";
  position: absolute;
  inset: -15%;
  z-index: -1;
  background-image:
    radial-gradient(circle at 20% 25%, #7c3aed, transparent 40%),
    radial-gradient(circle at 80% 30%, #ec4899, transparent 35%),
    radial-gradient(circle at 55% 85%, #06b6d4, transparent 40%);
  filter: blur(48px);
}
```

Una mesh sfocata su uno pseudo-elemento. Il testo dentro `.mesh` resta nitido perché è sfocato solo lo pseudo-elemento.

> **La sfocatura è la parte costosa** Una sfocatura statica viene dipinta una volta e di solito va bene. Un livello sfocato che si muove o cambia dimensione viene ridisegnato a ogni fotogramma, e i grandi raggi di sfocatura a schermo intero costano di più. Vedi le [prestazioni dei gradienti CSS](https://gradiently.design/it/guide/css-gradient-performance).

## Aggiungere la grana a un gradiente mesh in CSS

La grana ha due compiti. Spezza i gradini visibili che compaiono nelle dissolvenze ampie e a basso contrasto, e dà alla superficie la qualità tattile, da pellicola, che fa sembrare i gradienti ponderati invece che predefiniti. In CSS, la fonte abituale è un filtro SVG `feTurbulence` usato come minuscola immagine di sfondo, sovrapposta con bassa opacità. La tecnica completa è nella [texture di rumore in CSS](https://gradiently.design/it/guide/css-noise-texture), e il ragionamento di design nei [gradienti con grana](https://gradiently.design/it/guide/grainy-gradients).

### Senza grana

- Anelli visibili nelle zone scure su molti schermi
- La superficie si legge come un colore piatto da schermo
- Sembra un modello predefinito

### Con una debole grana

- I gradini si spezzano e spariscono
- La superficie si legge come carta, pellicola o stampa
- Sembra voluto e rifinito

## Animare un gradiente mesh

Le posizioni dei gradienti non sono animabili da sole, ma le proprietà personalizzate registrate sì. Dichiara ogni coordinata che si muove con `@property`, usala dentro il gradiente e anima la proprietà. Mantieni il movimento lento e spegnilo per chi chiede il [movimento ridotto](https://gradiently.design/it/guide/reduced-motion).

```css
@property --x1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 15%;
}

.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(circle at var(--x1) 20%, rgb(124 58 237 / 0.85), transparent 55%),
    radial-gradient(ellipse at 60% 90%, rgb(6 182 212 / 0.7), transparent 60%);
  animation: drift 20s ease-in-out infinite alternate;
}

@keyframes drift {
  to { --x1: 55%; }
}

@media (prefers-reduced-motion: reduce) {
  .mesh { animation: none; }
}
```

Una pozza che scivola in alto. Aggiungi una seconda proprietà per ogni coordinata che vuoi muovere.

Ogni fotogramma di questa animazione ridisegna l’intero sfondo. Su una piccola scheda è banale; su un hero a schermo intero vale la pena misurarlo. La guida ai [gradienti animati](https://gradiently.design/it/guide/css-animated-gradient) tratta alternative più economiche come spostare un livello sovradimensionato con `transform`.

## Quando usare invece un’immagine o WebGL

| Approccio | Ideale per | Attenzione a |
| --- | --- | --- |
| Gradienti CSS a livelli | Sfondi statici, schede, hero con da tre a cinque colori | Pozze dall’aspetto rotondo, banding senza grana |
| CSS con sfocatura | Campi statici più morbidi e organici | Costo di ridisegno se animati o ridimensionati spesso |
| Immagine esportata (AVIF o WebP) | Mesh complesse con molti punti o forme pittoriche | Peso del file e un ritaglio fisso per formato |
| Video in loop | Movimento ricco su un hero | Dimensione del file, regole di avvio automatico, movimento ridotto |
| Shader WebGL | Movimento a schermo intero, fluido e interattivo | Complessità del codice, consumo di batteria, alternative di riserva |

Scegli lo strumento più leggero che abbia ancora l’aspetto giusto.

Gli shader sono trattati nei [gradienti WebGL](https://gradiently.design/it/guide/shader-gradients). Una via di mezzo è progettare lo sfondo una volta come materiale vivo ed esportarlo: i Mark di Gradiently sono materiali simili a mesh con colore, grana, luce e movimento, e un design realizzato con uno di essi si esporta come PNG, JPEG o video in loop senza stacchi da 5 a 30 secondi.

Un Mark: pozze di colore, materiale e grana disegnati dal vivo invece che approssimati con livelli.

## FAQ

### Si può fare un gradiente mesh con il solo CSS?

Non in modo nativo, ma sovrapporre da tre a cinque gradienti radiali che sfumano verso il trasparente su un colore di base dà una mesh convincente. Una sfocatura e uno strato di rumore la rifiniscono.

### Quanti gradienti radiali servono a una mesh CSS?

Di solito bastano da tre a cinque. Meno sembra un semplice bagliore; di più tende a diventare sporco e più difficile da equilibrare.

### Perché il mio gradiente mesh CSS sembra sporco?

Tonalità opposte che si incontrano in sRGB sfumano attraverso il grigio. Usa colori vicini, riduci la sovrapposizione o aggiungi `in oklab` a ogni livello.

### Un gradiente mesh CSS è dannoso per le prestazioni?

Uno statico è economico. I costi salgono con i grandi filtri di sfocatura e con l’animazione, perché lo sfondo si ridisegna a ogni fotogramma.

### L’SVG supporta i gradienti mesh?

I gradienti mesh furono abbozzati per SVG 2 ma i browser non li hanno mai implementati, quindi sul web li si imita con i livelli, si usa un’immagine o li si disegna con WebGL.