# Gradiente lineare in CSS: la guida completa a linear-gradient()

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

Ogni parte di linear-gradient() spiegata con un esempio dal vivo accanto al suo codice, dalla direzione predefinita ai punti netti, ai riflessi a più livelli e alle sfumature OKLCH più morbide.

## The short version

- Un gradiente lineare CSS è un’immagine che il browser disegna lungo una linea retta, scritta con la funzione linear-gradient() e usata ovunque sia accettata un’immagine, di solito background-image.
- Senza una direzione, un gradiente lineare va dall’alto verso il basso, cioè 180deg; 0deg punta in alto e gli angoli girano in senso orario.
- I punti di colore senza posizioni sono distribuiti in modo uniforme, e due punti nella stessa posizione creano un bordo netto invece di una sfumatura.
- Più gradienti si possono sovrapporre in un solo background-image, separati da virgole, con il primo disegnato in cima.
- Aggiungere un metodo di interpolazione come in oklch mantiene luminoso il centro di una sfumatura invece di lasciarlo diventare grigio.

Un **gradiente lineare in CSS** è un’immagine che il browser disegna lungo una linea retta, sfumando da un colore al successivo. Lo scrivi con la funzione `linear-gradient()` e lo usi ovunque il CSS accetti un’immagine, più spesso in `background-image`. Non richiede alcun file, scala a qualsiasi dimensione senza sfocarsi e non costa nulla da scaricare. La versione utile più breve ha due colori: `linear-gradient(#0f172a, #38bdf8)` sfuma da un blu notte in alto a un azzurro cielo in basso.

```css
.hero {
  background-color: #0f172a; /* shown if the gradient fails */
  background-image: linear-gradient(#0f172a, #38bdf8);
}
```

Il gradiente lineare più semplice: due colori, direzione predefinita, con un colore piatto sotto come riserva.

Da blu notte a cielo, dall’alto al basso: `linear-gradient(#0f172a, #38bdf8)`

Il codice qui sopra, disegnato. Senza direzione significa dall’alto al basso.

Questa guida percorre ogni parte della funzione nell’ordine in cui la incontri. Se vuoi il quadro più ampio su come i gradienti lineari si confrontano con quelli radiali, conici e mesh, parti dai [tipi di gradienti](https://gradiently.design/it/guide/types-of-gradients).

## La sintassi di linear-gradient()

La funzione accetta una direzione facoltativa, un metodo di interpolazione del colore facoltativo e poi un elenco di almeno due punti di colore. Tutto è separato da virgole tranne la direzione e il metodo di interpolazione, che condividono il primo argomento.

| Parte | Esempio | Cosa fa |
| --- | --- | --- |
| Direzione come angolo | `135deg`, `0.25turn` | Imposta l’angolo della linea del gradiente. 0deg punta in alto, gli angoli girano in senso orario. |
| Direzione con parole chiave | `to right`, `to top left` | Punta la linea verso un lato o un angolo del riquadro. |
| Metodo di interpolazione | `in oklch`, `in srgb` | Sceglie lo spazio colore in cui si calcola la sfumatura. |
| Punto di colore | `#38bdf8 40%` | Un colore, facoltativamente con una o due posizioni lungo la linea. |
| Indicazione di colore | `30%` tra due punti | Sposta il punto medio della sfumatura tra i suoi vicini. |

I pezzi di linear-gradient(), nell’ordine in cui compaiono. Solo i punti di colore sono obbligatori.

Il riferimento completo si trova nella [pagina MDN su linear-gradient()](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient), che documenta anche l’esatta grammatica della specifica CSS Images.

## Angoli del gradiente e parole chiave di direzione

Gli angoli seguono una bussola: `0deg` punta in alto, `90deg` a destra, `180deg` in basso e `270deg` a sinistra. Il gradiente parte dal lato opposto e viaggia verso la direzione che indichi, quindi `90deg` va da sinistra a destra. Puoi scrivere anche `turn`, `rad` o `grad`, dove `0.25turn` equivale a `90deg`. Se non indichi nulla, l’impostazione predefinita è `to bottom`.

- 0deg: dal basso verso l’alto: `linear-gradient(0deg, #1e1b4b, #f472b6)`
- 90deg: da sinistra a destra: `linear-gradient(90deg, #1e1b4b, #f472b6)`
- 180deg: il predefinito: `linear-gradient(180deg, #1e1b4b, #f472b6)`
- 135deg: da alto sinistra a basso destra: `linear-gradient(135deg, #1e1b4b, #f472b6)`

Una coppia da indaco a rosa a quattro angoli. Il primo colore sta sempre all’inizio della linea.

Le parole chiave di angolo non sono uguali agli angoli di 45 gradi. `to top right` inclina la linea in modo che il colore centrale passi esattamente tra gli altri due angoli, qualunque sia la forma del riquadro. Su un banner largo quella linea è molto più piatta di `45deg`, che punta sempre a 45 gradi e ignora la forma del riquadro. Usa le parole chiave quando la sfumatura deve rispettare gli angoli, e gli angoli quando più elementi di forme diverse devono condividere una sola direzione. Altro sulla scelta delle direzioni negli [angoli dei gradienti](https://gradiently.design/it/guide/gradient-angle).

> **Perché gli angoli coincidono sempre** La linea del gradiente viene allungata in modo che il primo e l’ultimo colore cadano esattamente negli angoli. Per un riquadro di larghezza W e altezza H con angolo A, la sua lunghezza è `abs(W × sin A) + abs(H × cos A)`. Ecco perché un gradiente a 135deg su un elemento molto largo sembra quasi orizzontale.

## Punti di colore, posizioni e indicazioni

I punti senza posizioni sono distribuiti in modo uniforme, quindi tre colori stanno a 0%, 50% e 100%. Dai a un punto una posizione in percentuale o in lunghezza per spostarlo. Dagliene due e il colore resta pieno tra di esse. Metti una percentuale isolata tra due punti e diventa un’indicazione: il punto in cui la sfumatura raggiunge il colore intermedio, che rende una parte della transizione più rapida dell’altra.

```css
/* even spacing */
background-image: linear-gradient(90deg, #0c4a6e, #22d3ee, #f0f9ff);

/* a hint: the midpoint arrives early, at 20% */
background-image: linear-gradient(90deg, #0c4a6e, 20%, #22d3ee);

/* two positions: cyan holds solid from 35% to 65% */
background-image: linear-gradient(90deg, #0c4a6e, #22d3ee 35% 65%, #f0f9ff);
```

Tre modi di modellare la stessa sfumatura. Le posizioni possono anche essere lunghezze come 120px.

- Distribuzione uniforme: `linear-gradient(90deg, #0c4a6e, #22d3ee, #f0f9ff)`
- Indicazione al 20%: `linear-gradient(90deg, #0c4a6e, 20%, #22d3ee)`
- Fascia piena, da 35% a 65%: `linear-gradient(90deg, #0c4a6e, #22d3ee 35% 65%, #f0f9ff)`

La stessa palette dall’oceano profondo al ghiaccio, modellata in tre modi da posizioni e indicazioni.

## Punti netti per strisce e divisioni

Quando due punti condividono una posizione, non c’è spazio per sfumare, e ottieni un bordo netto. I browser riportano anche alla posizione precedente un punto che viene prima di quello che lo precede, il che dà una scorciatoia utile: `#f97316 50%, #1e293b 0` significa che il secondo colore parte esattamente dove finisce il primo. Ripeti l’idea con `repeating-linear-gradient()` e ottieni le strisce.

- Divisione metà e metà: `linear-gradient(90deg, #f97316 50%, #1e293b 0)`
- Tre fasce ambra: `linear-gradient(180deg, #fde68a 0 33%, #f59e0b 0 66%, #b45309 0)`
- Strisce diagonali di pericolo: `repeating-linear-gradient(45deg, #1e293b 0 12px, #f97316 12px 24px)`

I punti netti disegnano forme invece di sfumature. Ce ne sono molte altre nei [motivi CSS](https://gradiently.design/it/guide/css-patterns).

## Sovrapporre più gradienti in un solo sfondo

`background-image` accetta un elenco separato da virgole, e la prima immagine viene dipinta in cima. I livelli si vedono l’uno attraverso l’altro solo dove sono trasparenti, quindi i gradienti superiori di solito sfumano verso `transparent`. I browser moderni sfumano in alfa premoltiplicato, quindi sfumare verso `transparent` non trascina più una tinta grigia nel colore come accadeva una volta. Abbina i livelli a `background-size` e `background-repeat` quando un livello deve coprire solo una parte del riquadro.

```css
.card {
  background-color: #111827;
  background-image:
    /* top: a soft sheen across the upper third */
    linear-gradient(180deg, rgb(255 255 255 / 0.12), transparent 35%),
    /* bottom: the colour itself */
    linear-gradient(135deg, #312e81, #7c3aed 55%, #db2777);
}
```

Un riflesso sovrapposto a un gradiente di base. Il primo gradiente dell’elenco viene disegnato in cima.

Sovrapporre è anche la base di effetti più ricchi: bagliori radiali a più livelli creano un [gradiente mesh in CSS](https://gradiently.design/it/guide/css-mesh-gradient), e un sottile livello di rumore in cima nasconde i gradini, come spiegato nel [banding nei gradienti](https://gradiently.design/it/guide/gradient-banding).

## Sfumature più morbide con l’interpolazione del colore

Quando ogni colore è scritto in un formato tradizionale come esadecimale, `rgb()` o `hsl()`, il browser sfuma in sRGB per compatibilità. Le sfumature sRGB tra tonalità distanti passano per centri spenti e grigiastri: da blu a giallo è il caso classico. Aggiungere `in oklab` o `in oklch` chiede uno spazio colore percettivo, che mantiene il centro più chiaro e uniforme. La guida dedicata ai [gradienti OKLCH in CSS](https://gradiently.design/it/guide/css-gradient-oklch) tratta direzioni della tonalità e alternative di riserva.

- sRGB predefinito: centro grigio: `linear-gradient(90deg, #2563eb, #facc15)`
- in oklab: centro più pulito: `linear-gradient(90deg in oklab, #2563eb, #facc15)`
- in oklch: viaggia nella tonalità: `linear-gradient(90deg in oklch, #2563eb, #facc15)`

Da blu a giallo in tre modi. Cambia solo il metodo di interpolazione.

### Da evitare

- Lunghe sfumature tra tonalità opposte in semplice sRGB
- `to top right` quando più schede di forme diverse devono condividere una sola direzione
- Sfumare verso `white` quando vuoi dissolvere; usa `transparent`
- Sfumature molto morbide, scure e larghe senza grana, che fanno banding su molti schermi

### Da fare

- Aggiungere `in oklch` o un punto intermedio per mantenere vivide le sfumature
- Usare un solo angolo, come `135deg`, per un sistema coerente
- Sfumare i livelli verso `transparent` così si vede ciò che sta sotto
- Aggiungere un debole livello di rumore sopra i grandi gradienti scuri

## Supporto dei browser e alternative di riserva

`linear-gradient()` funziona senza prefissi in ogni browser attuale, quindi le vecchie versioni con `-webkit-` possono sparire. I metodi di interpolazione, i punti a due posizioni e le indicazioni sono più recenti; controlla [caniuse](https://caniuse.com/css-gradients) per i dettagli. Lo schema più sicuro è un `background-color` piatto per primo, poi il gradiente, poi una versione migliorata in una dichiarazione successiva, che i browser più vecchi saltano perché non riescono a interpretarla.

```css
.banner {
  background-color: #1e3a8a;
  background-image: linear-gradient(90deg, #1e3a8a, #f59e0b);
  /* browsers that understand interpolation methods use this line */
  background-image: linear-gradient(90deg in oklch, #1e3a8a, #f59e0b);
}
```

Miglioramento progressivo: ogni riga sostituisce la precedente solo se il browser la capisce.

Se preferisci partire da una sfumatura che ha già carattere invece di regolare i punti a mano, un [generatore di gradienti](https://gradiently.design/it/guide/gradient-generator) o una libreria di sfondi già pronti fa risparmiare tempo. In ogni caso conserva il codice: un gradiente in CSS resta nitido a ogni dimensione e pesa pochi byte.

## FAQ

### Come creo un gradiente lineare in CSS?

Imposta `background-image: linear-gradient(direzione, colore1, colore2)` su un elemento, ad esempio `linear-gradient(90deg, #0f172a, #38bdf8)`. Aggiungi prima un `background-color` come riserva.

### Qual è la direzione predefinita di un gradiente lineare CSS?

Dall’alto verso il basso, uguale a `to bottom` o `180deg`. Il primo colore compare in alto e l’ultimo in basso.

### Come faccio una linea netta in un gradiente lineare?

Dai a due punti vicini la stessa posizione, come `#f97316 50%, #1e293b 50%`, oppure usa `0` come seconda posizione così viene riportata al punto precedente.

### Perché il centro del mio gradiente sembra grigio?

I colori esadecimali sfumano in sRGB per impostazione predefinita, il che spegne il punto medio tra tonalità distanti. Aggiungi `in oklch` o `in oklab` dopo l’angolo, oppure inserisci un punto intermedio più luminoso.

### 45deg è uguale a to top right?

Solo su un quadrato. `45deg` punta sempre a 45 gradi, mentre `to top right` adatta il suo angolo in modo che il colore centrale passi tra gli altri due angoli del riquadro.