# Lineare, radiale, conico e mesh: tutti i tipi di gradiente spiegati

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

Ogni gradiente sposta il colore lungo un percorso. Cambia il percorso e cambi la sensazione. Ecco ogni tipo, come appare, il suo codice e il lavoro che fa meglio.

## The short version

- I principali tipi di gradienti sono lineare, radiale, conico e mesh, e ognuno sposta il colore lungo un percorso diverso.
- I gradienti lineari cambiano colore lungo una linea retta, quelli radiali si espandono da un punto e quelli conici ruotano intorno a un centro.
- I gradienti ripetuti affiancano più volte una breve sfumatura per creare strisce, anelli e raggiere.
- I gradienti mesh e a forma libera fondono diversi punti di colore in due dimensioni, per questo sembrano organici invece che geometrici.
- La grana non è un tipo di gradiente ma uno strato sopra, e cambia la resa di ogni tipo più di quanto la maggior parte delle persone si aspetti.

Esistono quattro **tipi di gradienti** principali: lineare, radiale, conico e mesh. I gradienti lineari cambiano colore lungo una linea retta, quelli radiali si espandono verso l’esterno da un punto, quelli conici ruotano intorno a un centro come la lancetta di un orologio e quelli mesh fondono diversi punti di colore insieme in due dimensioni. Intorno a loro ci sono alcune varianti utili: i gradienti ripetuti, quelli a forma libera e la grana, che è una texture stesa sopra più che un tipo a sé.

Qui sotto, ogni tipo ha un esempio dal vivo da copiare, una nota su ciò in cui eccelle e un link alla sua guida completa. Se parti da zero, [che cos’è un gradiente](https://gradiently.design/it/guide/what-is-a-gradient) spiega prima punti di colore, posizioni e spazi colore.

## Gradienti lineari

Un gradiente lineare corre lungo una linea retta con un angolo a tua scelta. In CSS la direzione predefinita è dall’alto in basso, `0deg` punta verso l’alto e gli angoli girano in senso orario, quindi `90deg` va da sinistra a destra e `135deg` va dall’angolo in alto a sinistra verso quello in basso a destra. È di gran lunga il tipo più comune, perché è prevedibile, riempie in modo pulito qualsiasi rettangolo e suggerisce una luce che arriva da un lato.

- 180deg: da blu profondo a cielo: `linear-gradient(180deg, #0c4a6e 0%, #38bdf8 100%)`
- 90deg: da ruggine ad arancione: `linear-gradient(90deg, #7c2d12 0%, #fb923c 100%)`
- 135deg: da mezzanotte a rosa: `linear-gradient(135deg, #1e1b4b 0%, #7c3aed 55%, #f472b6 100%)`

Stesso tipo, tre direzioni. Il verticale sembra calmo, l’orizzontale sembra movimento, il diagonale sembra energico.

Usa i gradienti lineari per sfondi di pagine e post, pulsanti, banner e tutto ciò che deve ripetersi o scalare in modo prevedibile. La sintassi e i dettagli sono in [i gradienti lineari in CSS](https://gradiently.design/it/guide/css-linear-gradient), e la scelta della direzione è trattata in [l’angolo del gradiente](https://gradiently.design/it/guide/gradient-angle).

## Gradienti radiali

Un gradiente radiale parte da un punto e si espande verso l’esterno come un cerchio o un’ellisse. Spostare quel punto dal centro è il trucco che lo fa sembrare luce: un bagliore dall’alto a sinistra si legge come una lampada, un sole o un riflesso su una superficie curva. I gradienti radiali sono anche il modo in cui si costruisce la maggior parte delle vignettature morbide e degli effetti a riflettore.

Bagliore radiale decentrato: `radial-gradient(circle at 30% 30%, #fef3c7 0%, #fbbf24 20%, #ea580c 50%, #431407 100%)`

Il centro sta al 30% in orizzontale e al 30% in verticale, così il punto più luminoso sembra una fonte di luce e non un bersaglio.

Usa i gradienti radiali per bagliori, riflettori, vignettature, sfere e tutto ciò che deve sembrare illuminato da un punto. Vedi [i gradienti radiali](https://gradiently.design/it/guide/radial-gradient) per le parole chiave di dimensione come `closest-side` e `farthest-corner`.

## Gradienti conici

Un gradiente conico cambia colore mentre giri intorno a un punto centrale, invece che allontanandoti da esso. Immagina il movimento della lancetta di un orologio. Per questo è la scelta naturale per ruote dei colori, grafici a torta, anelli di caricamento e riflessi angolari come il metallo spazzolato o il lampo arcobaleno di una lamina olografica.

- Ruota dei colori: `conic-gradient(from 0deg, #ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #6366f1, #d946ef, #ef4444)`
- Grafico a torta con stop netti: `conic-gradient(#7c3aed 0deg 140deg, #f472b6 140deg 250deg, #e5e7eb 250deg 360deg)`
- Riflesso metallico: `conic-gradient(from 200deg at 50% 50%, #cbd5e1, #f8fafc, #94a3b8, #e2e8f0, #64748b, #cbd5e1)`

I gradienti conici ruotano intorno al centro. Gli stop netti ne fanno un grafico a torta; i grigi morbidi ne fanno metallo.

Usa i gradienti conici per ruote, grafici, riflessi e iridescenze. La guida completa è [i gradienti conici](https://gradiently.design/it/guide/conic-gradient), e l’effetto lamina è in [i gradienti olografici](https://gradiently.design/it/guide/holographic-gradients).

## Gradienti ripetuti

Ciascuno dei tre tipi CSS ha una versione ripetuta. Invece di stendere una sola sfumatura su tutta la forma, ripete più volte una sfumatura breve. Con gli stop netti ottieni strisce, anelli e raggiere nitidi senza alcun file immagine.

- Lineare ripetuto: strisce: `repeating-linear-gradient(45deg, #111827 0px 12px, #374151 12px 24px)`
- Radiale ripetuto: anelli: `repeating-radial-gradient(circle at 50% 50%, #0f766e 0px 10px, #5eead4 10px 20px)`
- Conico ripetuto: raggiera: `repeating-conic-gradient(from 0deg at 50% 100%, #fbbf24 0deg 8deg, #f97316 8deg 16deg)`

Sfumature brevi, ripetute. Le librerie di motivi sono costruite quasi interamente con questi tre.

## Gradienti mesh e a forma libera

Un gradiente mesh mette il colore in diversi punti di una superficie e li fonde tutti in due dimensioni. Illustrator chiama la sua versione a punti e griglia «trama sfumata» e quella più libera «sfumatura a forma libera». In ogni caso, il risultato non ha un’unica direzione, ed è per questo che sembra organico, come luce attraverso l’acqua o vernice colata. Il CSS non ha un tipo mesh, ma puoi imitarne uno in modo convincente sovrapponendo gradienti radiali morbidi su un colore di base.

```css
.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(at 18% 22%, #7c3aed 0px, transparent 55%),
    radial-gradient(at 82% 18%, #0ea5e9 0px, transparent 50%),
    radial-gradient(at 70% 85%, #f472b6 0px, transparent 55%),
    radial-gradient(at 25% 80%, #14b8a6 0px, transparent 50%);
}
```

Quattro strati radiali morbidi su una base scura fanno un mesh credibile. Sposta le posizioni `at` per spostare le macchie di colore.

Un post verticale con la sola parola Deriva su un gradiente multicolore morbido e organico

Un colore organico e senza direzione è ciò per cui esistono i gradienti mesh: niente punta da nessuna parte, quindi l’occhio si riposa.

Usa i gradienti mesh per sfondi hero, wallpaper, copertine di album e campi di brand che devono sembrare vivi. Le insidie, soprattutto colori fangosi e banding, sono in [i gradienti mesh](https://gradiently.design/it/guide/mesh-gradients).

## Grana e texture: lo strato sopra

La grana non è un tipo di gradiente, ma cambia la resa di ogni tipo. Un sottile strato di rumore nasconde le strisce che le sfumature morbide possono mostrare sugli schermi, e fa sembrare il colore digitale stampato o cinematografico. Altre materie, come carta, vetro e seta, fanno lo stesso lavoro con una voce diversa. Vedi [i gradienti con grana](https://gradiently.design/it/guide/grainy-gradients) per capire quanta aggiungerne.

## Quale tipo di gradiente usare

| Tipo | Ideale per | Sensazione |
| --- | --- | --- |
| Lineare | Sfondi, pulsanti, banner, barre | Direzionale, pulito, calmo |
| Radiale | Bagliori, riflettori, vignettature, sfere | Illuminato, concentrato, caldo |
| Conico | Ruote, grafici, riflessi, lamine | Angolare, metallico, preciso |
| Ripetuto | Strisce, anelli, motivi | Grafico, retrò, ritmico |
| Mesh o a forma libera | Hero, wallpaper, copertine di album | Organico, morbido, vivo |
| Qualsiasi tipo con grana | Poster, social, campi di brand | Stampato, tattile, curato |

Un punto di partenza, non una regola. Molti buoni design combinano una base lineare, un bagliore radiale e uno strato di grana.

Se vuoi un campo finito con colore, luce e grana già bilanciati, è esattamente ciò che è un Mark, e puoi creare design con qualsiasi Mark del Mercato gratuitamente.

## FAQ

### Quali sono i quattro tipi di gradienti?

Lineare, radiale, conico e mesh. Il lineare segue una linea retta, il radiale si espande da un punto, il conico ruota intorno a un centro e il mesh fonde diversi punti in due dimensioni.

### Che differenza c’è tra un gradiente lineare e uno radiale?

Un gradiente lineare cambia colore lungo una linea retta con un certo angolo. Un gradiente radiale cambia colore verso l’esterno da un punto centrale, in un cerchio o in un’ellisse.

### Che differenza c’è tra un gradiente conico e uno radiale?

Un gradiente radiale cambia colore man mano che ti allontani dal centro. Un gradiente conico cambia colore man mano che giri intorno al centro, come la lancetta di un orologio.

### Il CSS può creare un gradiente mesh?

Il CSS non ha un tipo di gradiente mesh, ma sovrapporre diversi gradienti radiali morbidi su un colore di base dà un effetto mesh convincente.

### La grana è un tipo di gradiente?

No. La grana è una texture stesa sopra qualsiasi tipo di gradiente. Nasconde il banding e fa sembrare il colore stampato invece che digitale.