Gradienti CSS
I gradienti CSS mostrano transizioni progressive tra due o più colori. Scopri i tipi di gradiente, l'utilizzo e numerosi esempi.
Un gradiente CSS è un'immagine generata dal browser che visualizza una transizione progressiva e fluida tra due o più colori specificati. Poiché un gradiente è tecnicamente un <image>, lo si imposta ovunque CSS si aspetti un valore immagine — più spesso sulla proprietà background-image, ma funziona anche per border-image, list-style-image e mask-image.
I gradienti sono indipendenti dalla risoluzione (si adattano a qualsiasi dimensione senza perdita di qualità) e non aggiungono richieste HTTP extra, il che li rende un'alternativa leggera ai file immagine per sfondi, pulsanti, overlay e forme decorative.
Questa pagina tratta le tre funzioni di gradiente definite da CSS, con esempi eseguibili per ciascuna:
- Gradienti lineari — i colori scorrono lungo una linea retta.
- Gradienti radiali — i colori si irradiano da un punto centrale.
- Gradienti conici — i colori ruotano attorno a un punto centrale.
Ogni funzione ha anche una variante repeating-* che ripete il gradiente invece di estirarlo una sola volta nella casella.
Gradienti Lineari
La funzione linear-gradient() crea un'immagine in cui i colori passano da uno all'altro lungo una linea retta. Si controllano due elementi: la direzione di quella linea e l'elenco dei color stop disposti lungo di essa. Senza una direzione, la linea va dalla parte superiore alla parte inferiore della casella.
Sintassi del gradiente lineare
background-image: linear-gradient(direction, color1, color2, ...);direction è opzionale. Può essere una parola chiave (to right, to bottom left) o un angolo (90deg). Tutto ciò che segue è l'elenco di colori separati da virgola. Qualsiasi colore CSS valido funziona, inclusi i colori con nome, hex, rgb() e hsl().
Dall'Alto al Basso
Per impostazione predefinita, i gradienti lineari passano dall'alto verso il basso, quindi è possibile omettere completamente la direzione.
Esempio di gradiente lineare dall'alto al basso
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 300px;
background-color: blue;
background-image: linear-gradient(#0052b0, #b340b3);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>La dichiarazione background-color è un fallback: i browser molto datati che non comprendono il gradiente ignorano la riga background-image e ricadono sul colore solido, in modo che il testo rimanga leggibile.
Da Sinistra a Destra
Aggiungere la parola chiave to right per ruotare la linea in modo che il primo colore si trovi sul bordo sinistro e l'ultimo su quello destro.
Esempio di gradiente lineare da sinistra a destra
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 300px;
background-color: blue;
background-image: linear-gradient(to right, #0052b0 ,#b340b3);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Gradienti Diagonali
Combinare una parola chiave verticale e una orizzontale (ad esempio to bottom right) per far scorrere la linea in diagonale attraverso la casella, da angolo ad angolo.
Esempio di gradiente diagonale
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 300px;
background-color: blue;
background-image: linear-gradient(to bottom right, #0052b0, #b340b3);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Utilizzo degli Angoli
Per un controllo completo sulla direzione, specificare un angolo invece di una parola chiave. L'angolo è misurato in senso orario dalla direzione "verso l'alto": 0deg punta la linea del gradiente verso l'alto (i colori scorrono dal basso verso l'alto), 90deg la punta a destra (da sinistra a destra), 180deg punta verso il basso. Gli angoli negativi ruotano in senso antiorario.
Esempio di gradiente lineare con un angolo specificato
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 300px;
background-color: blue;
background-image: linear-gradient(70deg, #0052b0, #b340b3);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Colori Multipli
Un gradiente accetta qualsiasi numero di colori. Sono distribuiti uniformemente per impostazione predefinita, con ogni colore che si fonde gradualmente nel successivo.
Esempio di gradiente lineare con colori multipli
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 300px;
background-color: blue;
background-image: linear-gradient(#f50707, #f56e00,#f7df00, #66f507, #0052b0, #520f41, #ff0856);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>È possibile combinare una direzione con colori multipli e fissare ciascun colore a una posizione specifica. Una posizione è una percentuale (0% è l'inizio della linea, 100% è la fine) o una lunghezza assoluta. Assegnare due posizioni a un colore crea una striscia uniforme di quel colore tra di esse.
Esempio di gradiente lineare con colori multipli da sinistra a destra
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 300px;
background-color: blue;
background-image: linear-gradient(to right, #f50707, #f56e00,#f7df00, #66f507, #0052b0, #520f41, #ff0856);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Esempio di gradiente lineare con colori multipli da destra a sinistra
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 300px;
background-color: blue;
background-image: linear-gradient(to left, #f50707, #f56e00,#f7df00, #66f507, #0052b0, #520f41, #ff0856);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Trasparenza
I color stop possono essere parzialmente o completamente trasparenti, utile per sfumare uno sfondo verso ciò che si trova dietro di esso. Usare rgba() (o qualsiasi colore con canale alfa) e impostare l'alfa da 0 (completamente trasparente) a 1 (completamente opaco). Questo è il modo standard per sovrapporre un overlay leggibile su una foto.
Esempio di gradiente lineare da colore pieno a trasparente
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 200px;
background-image: linear-gradient(to left, rgba(235, 117, 253, 0), rgba(235, 117, 253, 1));
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Gradiente Lineare Ripetuto
repeating-linear-gradient() ripete un motivo gradiente nella casella invece di estirarlo una sola volta. La dimensione di una ripetizione è definita dalla posizione dell'ultimo color stop — qui 10%, quindi il motivo a tre colori si ripete ogni 10% della linea. È utile per strisce e texture di barre di avanzamento.
Esempio di gradiente lineare ripetuto
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 200px;
background-color: blue;
background-image: repeating-linear-gradient(55deg, #d5b6de, #6c008a 7%, #036ffc 10%);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Gradienti Radiali
Un gradiente radiale si irradia da un punto centrale, con il primo colore al centro e l'ultimo al bordo. Sono necessari almeno due color stop. Il gradiente può avere la forma di un circle o di un ellipse (il valore predefinito).
Sintassi del gradiente radiale
background-image: radial-gradient(shape size at position, start-color, ..., last-color);La parte shape size at position è opzionale. Se omessa, si ottiene un'ellisse farthest-corner centrata nella casella.
Esempio di gradiente radiale con tre colori
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 250px;
width: 250px;
background-color: blue;
background-image: radial-gradient( #ff0509, #fff700, #05ff33);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Posizionamento dei Color Stop Radiali
Come per i gradienti lineari, è possibile fissare ciascun colore a una percentuale o lunghezza assoluta per controllare quanto del raggio occupa.
Esempio di color stop con spaziatura diversa
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 250px;
width: 250px;
background-color: blue;
background-image: radial-gradient( #ff0509 10%, #fff700 20%, #05ff33 80%);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Posizionamento del Centro
Usare la parola chiave at per spostare il centro del gradiente lontano dal centro della casella, utilizzando percentuali o lunghezze assolute.
Esempio di gradiente radiale con centro posizionato
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 250px;
width: 250px;
background-color: blue;
background-image: radial-gradient(at 0% 30%, #ff0509 10px, #fff700 30%, #05ff33 50%);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Forma del Gradiente Radiale
Il parametro di forma è circle o ellipse. Un'ellisse (il valore predefinito) si estende per corrispondere al rapporto d'aspetto della casella; un cerchio rimane perfettamente rotondo indipendentemente dalla larghezza e dall'altezza della casella.
Esempio di forma del gradiente radiale
<!DOCTYPE html>
<html>
<head>
<title> Title of the document</title>
<style>
.gradient1 {
height: 150px;
width: 200px;
background-color: blue;
background-image: radial-gradient(red, yellow, green);
}
.gradient2 {
height: 150px;
width: 200px;
background-color: blue;
background-image: radial-gradient(circle, red, yellow, green);
}
</style>
</head>
<body>
<h2>Ellipse:</h2>
<div class="gradient1"></div>
<h2>Circle:</h2>
<div class="gradient2"></div>
</body>
</html>Dimensionamento del Gradiente Radiale
La parola chiave di dimensione stabilisce dove cade l'ultimo color stop — ovvero quanto lontano si diffonde il gradiente prima di terminare. Ci sono quattro parole chiave, misurate dal centro del gradiente:
closest-side— termina al bordo più vicino della casella.closest-corner— termina all'angolo più vicino.farthest-side— termina al bordo più lontano.farthest-corner— termina all'angolo più lontano. Questo è il valore predefinito.
Esempio di gradienti radiali con dimensione specificata
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient1 {
height: 150px;
width: 150px;
background-color: blue;
background-image: radial-gradient(closest-side at 60% 55%, #ff0509, #fff700, #103601);
}
.gradient2 {
height: 150px;
width: 150px;
background-color: blue;
background-image: radial-gradient(farthest-side at 60% 55%, #ff0509, #fff700, #103601);
}
.gradient3 {
height: 150px;
width: 150px;
background-color: blue;
background-image: radial-gradient(closest-corner at 60% 55%, #ff0509, #fff700, #103601);
}
.gradient4 {
height: 150px;
width: 150px;
background-color: blue;
background-image: radial-gradient(farthest-corner at 60% 55%, #ff0509, #fff700, #103601);
}
</style>
</head>
<body>
<h2>closest-side:</h2>
<div class="gradient1"></div>
<h2>farthest-side:</h2>
<div class="gradient2"></div>
<h2>closest-corner:</h2>
<div class="gradient3"></div>
<h2>farthest-corner:</h2>
<div class="gradient4"></div>
</body>
</html>Gradiente Radiale Ripetuto
repeating-radial-gradient() ripete il motivo radiale verso l'esterno ad anelli dal centro. Come per la versione lineare, la posizione dell'ultimo color stop definisce la dimensione di un anello.
Esempio di gradiente radiale ripetuto
<!DOCTYPE html>
<html>
<head>
<style>
.gradient {
height: 200px;
width: 200px;
background-color: blue;
background-image: repeating-radial-gradient(#f70000, #f7da00 10%, #005cfa 15%);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Gradienti Conici
Un gradiente conico ruota i suoi colori attorno a un punto centrale, come le lancette di un orologio che spazzano lo spettro. Mentre un gradiente radiale cambia colore man mano che ci si sposta verso l'esterno, un gradiente conico cambia colore man mano che ci si sposta intorno. Questo lo rende lo strumento naturale per grafici a torta, ruote dei colori e accenti angolari.
Sintassi del gradiente conico
background-image: conic-gradient(color1, color2);I color stop sono posizionati per angolo (deg) anziché per lunghezza. Il gradiente inizia dall'alto (0deg) e spazza in senso orario.
Esempio di gradiente conico di base
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 250px;
width: 250px;
background-color: blue;
background: conic-gradient(#ff0000, #fff200);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Posizionamento del Centro Conico
Come per i gradienti radiali, la parola chiave at sposta il punto centrale della rotazione utilizzando percentuali o lunghezze assolute.
Esempio di gradiente conico con centro posizionato
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 250px;
width: 250px;
background-color: blue;
background: conic-gradient(at 0% 50%, red 10%, yellow 30%, #1eff00 60%);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Modifica dell'Angolo
La parola chiave from ruota l'intera spazzata, spostando il punto di partenza 0deg.
Esempio di gradiente conico con angolo ruotato
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 250px;
width: 250px;
background-color: blue;
background: conic-gradient(from 35deg, #ff0000, #ffa600, #fcf000, #03ff0f, #be05fc, #ff0095);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Gradiente Conico Ripetuto
repeating-conic-gradient() ripete il motivo angolare attorno al cerchio, che è il modo classico per creare effetti a stella e a scacchiera.
Esempio di gradiente conico ripetuto
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 250px;
width: 250px;
background-color: blue;
background: repeating-conic-gradient(from -45deg, red 45deg, orange, yellow, green, blue 225deg);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Supporto Browser e Consigli Pratici
I gradienti lineari e radiali sono supportati in tutti i browser moderni. I gradienti conici sono più recenti — funzionano in tutte le versioni attuali di Chrome, Edge, Firefox e Safari, ma se è necessario supportare browser molto datati, abbinare il gradiente a un fallback con background-color solido come mostrato in precedenza.
Alcuni suggerimenti pratici:
- Sovrapponi i gradienti. La proprietà
background-imageaccetta un elenco separato da virgole, quindi è possibile sovrapporre più gradienti (il primo nell'elenco si trova in cima). Combinare gradienti trasparenti con una foto per creare overlay. - Usa
hsl()per transizioni più fluide. L'interpolazione tra tinte molto diverse in hex può passare attraverso grigi opachi; scegliere tinte vicine, o usarehsl(), mantiene le transizioni nitide. - Performance. I gradienti sono economici, ma animarli ridisegna l'intera casella. Preferire l'animazione di
transform/opacityrispetto al gradiente stesso per un movimento fluido.
Argomenti Correlati
background-image— la proprietà a cui i gradienti vengono applicati più spesso.background-size— controlla la dimensione di un livello gradiente per abilitare la ripetizione.- Colori CSS e nomi di colori CSS — i valori di colore da inserire nei gradienti.
- Transizioni CSS — per animare altre proprietà insieme agli sfondi con gradiente.