Gradienti in CSS
I gradienti CSS mostrano transizioni progressive tra due o più colori specificati. Scopri i tipi di gradiente, il loro utilizzo e guarda tanti esempi.
I gradienti CSS mostrano transizioni progressive tra due o più colori specificati. I gradienti possono essere usati negli sfondi.
Esistono tre tipi di gradienti:
Gradienti lineari
Il linear-gradient crea un'immagine costituita da una transizione graduale tra due o più colori lungo una linea retta. Può avere un punto di partenza e una direzione, oltre all'effetto gradiente.
Sintassi
La sintassi del gradiente lineare
background-image: linear-gradient(direction, color1, color2, ...);Dall'alto verso il basso
Per impostazione predefinita, i gradienti lineari sfumano dall'alto verso il basso.
Esempio di gradiente lineare dall'alto verso il basso:
gradiente lineare dall'alto verso il 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>Aggiungiamo la proprietà background-color per i browser che non supportano i gradienti.
Da sinistra a destra
Modifica la rotazione del linear-gradient specificando la direzione che parte da sinistra e sfuma verso destra.
Esempio di gradiente lineare da sinistra a destra:
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
I gradienti possono procedere in diagonale specificando sia la posizione di partenza orizzontale che quella verticale. Parte dall'angolo in alto a sinistra e procede verso l'angolo in basso a destra.
Esempio di gradiente diagonale:
gradiente diagonale CSS
<!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>Uso degli angoli
Definisci un angolo invece delle direzioni per avere un maggiore controllo sulla direzione del gradiente. 0deg crea un gradiente verticale che sfuma dal basso verso l'alto, 90deg crea un gradiente orizzontale che sfuma da sinistra a destra. Specificando angoli negativi, il gradiente procederà in senso antiorario.
Esempio di gradiente lineare con un angolo specificato:
gradiente lineare con angolo
<!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>Effetto a più colori
I colori dei gradienti CSS variano in base alla posizione, producendo transizioni di colore graduali. Non c'è alcun limite al numero di colori utilizzabili.
Esempio di gradiente lineare con effetto a più colori:
gradiente lineare con più colori
<!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>Possiamo anche creare un gradiente lineare con effetto a più colori specificando una direzione. Puoi assegnare a ogni colore zero, uno o due valori percentuali o di lunghezza assoluta. 0% indica il punto di partenza, mentre 100% indica il punto finale.
Esempio di gradiente lineare con più colori da sinistra a destra:
gradiente lineare da sinistra a destra con più colori
<!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 più colori da destra a sinistra:
gradiente lineare da destra a sinistra con più colori
<!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 gradienti supportano la trasparenza, quindi puoi usare più sfondi per ottenere un effetto trasparente. Per ottenerlo, puoi usare la funzione rgba() per definire i color stop. L'ultimo parametro della funzione rgba() può essere un valore da 0 a 1, che definisce la trasparenza del colore. 0 indica la trasparenza totale, 1 indica il colore pieno.
Esempio di gradiente lineare dal colore pieno al trasparente:
gradiente lineare 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
Usa la funzione repeating-linear-gradient() per ripetere un gradiente lineare. I colori vengono ripetuti ciclicamente man mano che il gradiente si ripete.
Esempio di gradiente lineare ripetuto:
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
I gradienti radiali si irradiano da un punto centrale. Per creare un gradiente radiale è necessario specificare almeno due color stop. I gradienti radiali possono essere circolari o ellittici.
Sintassi
Sintassi del gradiente radiale
background-image: radial-gradient(shape size at position, start-color, ..., last-color);Esempio di gradiente radiale con tre colori:
gradiente radiale CSS
<!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 i gradienti lineari, anche i gradienti radiali accettano una posizione specificata e una lunghezza assoluta.
Esempio di color stop con spaziatura diversa:
color stop posizionati del gradiente radiale
<!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 del gradiente radiale
Puoi anche specificare la posizione del centro del gradiente con percentuali o lunghezze assolute.
Esempio di gradiente radiale con centro posizionato:
centro posizionato del gradiente radiale
<!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 shape definisce la forma del gradiente radiale. Può assumere due valori: circle o ellipse. Il valore predefinito è ellipse.
Esempio di forma del gradiente radiale:
gradiente radiale CSS circolare ed ellittico
<!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
A differenza dei gradienti lineari, la dimensione dei gradienti radiali può essere specificata. I valori sono:
- closest-corner
- closest-side
- farthest-corner (predefinito)
- farthest-side.
Esempio di gradienti radiali con dimensione specificata:
gradiente radiale CSS closest-corner, closest-side, farthest-corner e farthest-side
<!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
La funzione CSS repeating-radial-gradient() crea un'immagine costituita da gradienti ripetuti che si irradiano da un'origine.
Esempio di gradiente radiale ripetuto:
gradiente radiale CSS 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
Il conic-gradient crea un'immagine costituita da un gradiente con transizioni di colore che ruotano attorno a un punto centrale.
Sintassi
gradiente conico CSS
background-image: conic-gradient(color1, color2);Esempio di gradiente conico di base:
gradiente conico CSS
<!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, il centro del gradiente conico può essere posizionato con percentuali o lunghezze assolute, tramite la parola chiave "at".
Esempio di gradiente conico con centro posizionato:
gradiente conico CSS 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
L'angolo del gradiente conico può essere ruotato tramite la parola chiave "from".
Esempio di gradiente conico con angolo ruotato:
gradiente conico CSS 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
La funzione CSS repeating-conic-gradient() crea un'immagine costituita da un gradiente ripetuto con transizioni di colore che ruotano attorno a un punto centrale.
Esempio di gradiente conico ripetuto:
gradiente conico CSS 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>