# Gradienti mesh: cosa sono e come crearne uno

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

I gradienti mesh sono i campi di colore morbidi e fluttuanti dietro metà delle pagine di lancio che hai visto quest’anno. Ecco come funzionano, come costruirne uno a mano e i due errori che rovinano la maggior parte di essi.

## The short version

- Un gradiente mesh è un gradiente in cui più punti di colore si fondono tra loro in due dimensioni, invece che lungo una linea o a partire da un centro.
- I gradienti mesh sembrano organici perché non hanno una direzione unica, quindi si leggono come luce, acqua o pittura invece che come geometria.
- Il CSS non ha un tipo di gradiente mesh, ma sovrapporre gradienti radiali morbidi su un colore di base scuro o chiaro dà un risultato convincente.
- I due errori più comuni sono il fango, quando colori opposti si incontrano e diventano grigi, e il banding, quando le sfumature delicate si spezzano in strisce.
- Da tre a cinque colori di una famiglia affine, un colore di base e un po’ di grana bastano per la maggior parte dei gradienti mesh.

Un **gradiente mesh** è un gradiente costruito da più punti di colore distribuiti su una superficie, ciascuno dei quali sfuma nei vicini in tutte le direzioni contemporaneamente. Un gradiente lineare si muove lungo una linea e uno radiale si allarga da un centro; una mesh non ha un percorso unico, quindi il colore si raccoglie, scorre e si sovrappone come la luce nell’acqua. Ecco perché i gradienti mesh sembrano organici, e perché sono diventati lo stile predefinito per sezioni hero, sfondi e copertine di album.

Questa guida spiega come funziona una mesh, come crearne una in CSS e nei programmi di grafica, e come evitare le chiazze grigie e le strisce che fanno sembrare economiche così tante di esse. Per le altre forme, vedi [i tipi di gradiente](https://gradiently.design/it/guide/types-of-gradients).

## Cosa rende un gradiente una mesh

In una vera trama di sfumatura, come quella di Adobe Illustrator, la superficie è divisa in una griglia. Ogni punto della griglia contiene un colore, e il programma sfuma in modo morbido tra i punti vicini, piegando la griglia per guidare il colore. Le sfumature a forma libera eliminano la griglia e ti lasciano mettere i punti di colore dove vuoi. I gradienti mesh per web e social di solito prendono una terza strada: morbide macchie di colore stese su una base e fuse tra loro.

Tutte e tre condividono un’idea. Il colore di ogni pixel è un mix dei punti di colore vicini, pesato in base a quanto sono vicini. Sposti un punto e cambia solo il suo intorno, ed è questo che permette a una mesh di sembrare fatta a mano invece che calcolata.

- Base notte: #0b1026
- Pozza viola: #7c3aed
- Pozza cielo: #0ea5e9
- Pozza petrolio: #14b8a6
- Accento rosa: #f472b6

Una ricetta mesh: un colore di base e quattro punti di colore. Viola, cielo e petrolio sono vicini sulla ruota dei colori, quindi le loro sovrapposizioni restano pulite; il rosa è l’unico accento.

## Perché i gradienti mesh sembrano organici

### Lineare o radiale

- Una direzione o un centro
- L’occhio segue la linea o il bersaglio
- Sembra progettato e geometrico
- Facile da riconoscere come preset

### Mesh

- Più punti di colore, nessuna direzione unica
- L’occhio vaga e si posa
- Sembra luce, acqua o pittura
- Ogni disposizione è leggermente diversa

Quella qualità vagante è anche il pericolo. Senza struttura, una mesh può sembrare una sfocatura casuale. Quelle riuscite hanno una composizione: un’area luminosa dove l’occhio arriva per primo, un’area più scura che dà peso e un’area calma in cui far stare le parole.

## Come creare un gradiente mesh in CSS

1. **Imposta un colore di base** Scegli un fondo scuro o chiaro. Si vede ovunque le pozze di colore sfumano, quindi decide l’atmosfera generale.
2. **Posiziona da tre a cinque pozze di colore** Ogni pozza è un `radial-gradient` centrato in una posizione con `at x% y%`, che sfuma in `transparent`. Mettile vicino agli angoli e ai bordi invece che al centro.
3. **Lasciale sovrapporre** Fai sfumare ogni pozza tra il 45% e il 60% del percorso, così le vicine si incontrano. È nelle sovrapposizioni che la mesh trova la sua ricchezza.
4. **Lascia una zona calma** Tieni un’area quasi tutta del colore di base, di solito dove andrà il titolo. Vedi [il testo su un gradiente](https://gradiently.design/it/guide/text-on-gradient).
5. **Aggiungi grana** Un leggero livello di rumore nasconde le strisce e aggiunge profondità. [I gradienti granulosi](https://gradiently.design/it/guide/grainy-gradients) mostra il codice.

```css
.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(at 12% 18%, #7c3aed 0px, transparent 55%),
    radial-gradient(at 88% 12%, #0ea5e9 0px, transparent 50%),
    radial-gradient(at 80% 88%, #14b8a6 0px, transparent 55%),
    radial-gradient(at 20% 92%, #f472b6 0px, transparent 45%);
}
```

La palette qui sopra come mesh CSS. Il primo livello elencato viene dipinto sopra, quindi metti per primo il colore più forte.

Dato che le pozze sono in percentuale, la mesh si ridimensiona con il suo riquadro. Su forme molto diverse, come una storia verticale e un banner largo, regola le posizioni `at` in modo che l’area luminosa cada ancora dove vuoi. La stessa palette si può animare lentamente spostando quelle posizioni; [gli sfondi con gradiente animato](https://gradiently.design/it/guide/animated-gradient-background) spiega come farlo senza penalizzare le prestazioni.

## Creare un gradiente mesh nei programmi di grafica

Nei programmi con una vera trama o sfumatura a forma libera, posiziona direttamente i punti di colore e trascinali finché la composizione funziona. In quelli che non ce l’hanno, il metodo della sfocatura funziona ovunque: disegna da tre a cinque forme morbide nei tuoi colori su un rettangolo di base, sfocale molto, spesso di un quarto della larghezza della tela o più, e lasciale sovrapporre. Poi aggiungi sopra un livello di grana ed esporta alla dimensione finale invece di ingrandire.

Un post verticale con il titolo sopra un’area luminosa e movimentata di un gradiente mesh

Parole posate direttamente su una parte movimentata della mesh combattono con il colore.

Lo stesso post verticale con un’area della mesh più calma e più scura dietro il titolo

La stessa mesh con una zona calma dietro le parole si legge a colpo d’occhio.

## Errori nei gradienti mesh e come correggerli

| Problema | Perché succede | Soluzione |
| --- | --- | --- |
| Chiazze grigie o marroni | Colori opposti, come arancione e blu, si incontrano e si annullano | Tieni le pozze vicine simili di tinta, o separa gli opposti con un terzo colore. Vedi [i gradienti fangosi](https://gradiently.design/it/guide/muddy-gradients) |
| Strisce visibili | Sfumature ampie e delicate procedono a scalini tra le tonalità che uno schermo può mostrare | Aggiungi grana ed evita una forte compressione JPEG. Vedi [il banding nei gradienti](https://gradiently.design/it/guide/gradient-banding) |
| Una macchia al centro | Pozze centrate sulla tela sembrano un bersaglio | Spingi le pozze verso bordi e angoli |
| Rumore arcobaleno | Troppi colori senza relazione | Da tre a cinque colori di una famiglia più un accento |
| Nessuno spazio per le parole | Colore distribuito in modo uniforme su tutta la superficie | Pianifica una zona calma prima di posizionare le pozze |

Quasi ogni gradiente mesh debole ha uno di questi cinque problemi.

Una mesh vale quanto la sua palette. Se non sei sicuro di quali colori si fonderanno in modo pulito, parti da una famiglia di [colori analoghi](https://gradiently.design/it/guide/analogous-colors) e aggiungi un accento a contrasto in una sola pozza.

Un Mark è un gradiente mesh rifinito a dovere: pozze bilanciate, materiale, grana e luce, reso dal vivo per ogni dimensione in cui progetti.

Se preferisci descrivere una mesh invece di costruirla, la Forge crea nuovi Mark da una frase o controllo per controllo, con fino a otto colori e tre materiali sovrapposti.

## FAQ

### Che cos’è un gradiente mesh?

Un gradiente mesh fonde più punti di colore su una superficie in due dimensioni, così il colore si raccoglie e si sovrappone in modo organico invece di seguire una linea o un centro.

### Si può creare un gradiente mesh in CSS?

Sì, per approssimazione. Sovrapponi da tre a cinque livelli di `radial-gradient`, ciascuno che sfuma nel trasparente, su un colore di sfondo di base.

### Quanti colori deve avere un gradiente mesh?

Da tre a cinque colori più una base di solito funzionano meglio. Oltre tende a sembrare rumore arcobaleno invece di un campo composto.

### Perché il mio gradiente mesh sembra fangoso?

Colori opposti si incontrano e si fondono verso il grigio. Tieni i colori vicini simili di tinta, oppure metti un colore ponte tra gli opposti.

### Che differenza c’è tra un gradiente mesh e una sfumatura a forma libera?

Una classica trama di sfumatura tiene i colori su una griglia di punti che puoi piegare. Una sfumatura a forma libera ti lascia mettere i punti di colore ovunque, senza griglia. Entrambe sfumano in due dimensioni.