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

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.

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

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.

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.

Il riferimento completo si trova nella pagina MDN su 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.

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.

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.

/* 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);

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.

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.

.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);
}

Sovrapporre è anche la base di effetti più ricchi: bagliori radiali a più livelli creano un gradiente mesh in CSS, e un sottile livello di rumore in cima nasconde i gradini, come spiegato nel banding nei gradienti.

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 tratta direzioni della tonalità e alternative di riserva.

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 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.

.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);
}

Se preferisci partire da una sfumatura che ha già carattere invece di regolare i punti a mano, un generatore di gradienti 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.