Funzione CSS repeating-linear-gradient()

Pagina precedente Funzione CSS repeating-conic-gradient()
Pagina successiva Funzione CSS repeating-radial-gradient()
Torna al livello superiore Manuale di Riferimento delle Funzioni CSS

Definizione e uso

CSS repeating-linear-gradient() La funzione viene utilizzata per il gradiente lineare ripetuto.

Esempio:

Gradiente lineare	Gradiente lineare ripetuto

linear-gradient(red, yellow, blue);	repeating-linear-gradient(red, yellow 10%, blue 20%);

Esempio

Esempio 1

Un gradiente lineare ripetuto:

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

Prova da solo

Esempio 2

Diversi gradienti lineari ripetuti:

#grad1 {
  background-image: repeating-linear-gradient(45deg, red, blue 7%, green 10%);
}
#grad2 {
  background-image: repeating-linear-gradient(190deg, red, blue 7%, green 10%);
}
#grad3 {
  background-image: repeating-linear-gradient(90deg, red, blue 7%, green 10%);
}

Prova da solo

Sintassi CSS

repeating-linear-gradient(angle to side-or-corner, color-stop1, color-stop2, ...);

Valore	Descrizione
angle	Definire l'angolo di direzione del gradiente. Da 0deg a 360deg. Il valore predefinito è 180deg.
side-or-corner	Definire la posizione di partenza della linea di gradiente. È composto da due chiavi: la prima rappresenta la direzione orizzontale (left o right), la seconda rappresenta la direzione verticale (top o bottom). L'ordine non è importante e ogni chiave è opzionale.
color-stop1, color-stop2,...	I punti di terminazione del colore sono i colori che si desidera visualizzare con una transizione morbida. Questo valore è composto da valori di colore e uno o due posizioni di arresto opzionali (percentuali tra 0% e 100% o lunghezze lungo l'asse del gradiente).

Valore

Descrizione

angle

Definire l'angolo di direzione del gradiente. Da 0deg a 360deg. Il valore predefinito è 180deg.

side-or-corner

Definire la posizione di partenza della linea di gradiente.

È composto da due chiavi: la prima rappresenta la direzione orizzontale (left o right), la seconda rappresenta la direzione verticale (top o bottom).

L'ordine non è importante e ogni chiave è opzionale.

color-stop1, color-stop2,...

I punti di terminazione del colore sono i colori che si desidera visualizzare con una transizione morbida.

Questo valore è composto da valori di colore e uno o due posizioni di arresto opzionali (percentuali tra 0% e 100% o lunghezze lungo l'asse del gradiente).