Funzione CSS linear-gradient()

Pagina precedente Funzione CSS light-dark()
Pagina successiva Funzione CSS log()
Torna al livello superiore Manuale di riferimento delle funzioni CSS

Definizione e utilizzo

CSS linear-gradient() La funzione viene utilizzata per creare una progressione lineare come sfondo.

Per creare una progressione lineare, è necessario definire almeno due etichette di colore. Le etichette di colore sono i colori che si desidera far transitare in modo fluido. È anche possibile impostare il punto di partenza e la direzione (o l'angolo) e l'effetto della progressione.

Esempi di progressione lineare:

Esempi

Esempio 1

Questa progressione lineare inizia dalla parte superiore. Passa dal rosso al giallo, poi al blu:

#grad {
  background-image: linear-gradient(red, yellow, blue);
}

Prova tu stesso

Esempio 2

Una progressione lineare che parte da sinistra. Passa dal rosso al blu:

#grad {
  background-image: linear-gradient(to right, red , blue);
}

Prova tu stesso

Esempio 3

Una progressione lineare che parte dall'angolo in alto a sinistra (e si estende verso il basso a destra):

#grad {
  background-image: linear-gradient(to bottom right, red , blue);
}

Prova tu stesso

Esempio 4

Una progressione lineare che specifica un angolo:

#grad {
  background-image: linear-gradient(180deg, red, blue);
}

Prova tu stesso

Esempio 5

Una progressione lineare che contiene più etichette di colore:

#grad {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

Prova tu stesso

Esempio 6

Un gradiente lineare con due etichette di colore posizionali:

#grad {
  background: linear-gradient(
    to right,
    red 17%,
    orange 17% 34%,
    yellow 34% 51%,
    green 51% 68%,
    blue 68% 84%,
    indigo 84%
  );
}

Prova tu stesso

Esempio 7

Un gradiente lineare con trasparenza:

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

Prova tu stesso

Sintassi CSS

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

Valore	Descrizione
side-or-corner	Opzionale. Punto di partenza della gradazione. Si inizia con il termine 'to', seguito da un massimo di due altri termini: left o right top o bottom Il valore predefinito è to bottom (in basso).
angle	Opzionale. Angolo di direzione della linea di gradazione: 0deg è uguale a: in alto (to top) 180deg è uguale a: in basso (to bottom) 270deg è uguale a: a sinistra (to left) 90deg è uguale a: a destra (to right)
color-stop1, color-stop2,...	Obbligatorio. Le etichette di colore sono i colori tra cui si desidera ottenere una transizione morbida. Questo valore è composto da un valore di colore seguito da un etichetta di colore opzionale, una o due posizioni (in percentuale tra 0% e 100% o lungo l'asse della gradazione).

Valore

Descrizione

side-or-corner

Opzionale. Punto di partenza della gradazione. Si inizia con il termine 'to', seguito da un massimo di due altri termini:

left o right
top o bottom

Il valore predefinito è to bottom (in basso).

angle

Opzionale. Angolo di direzione della linea di gradazione:

0deg è uguale a: in alto (to top)
180deg è uguale a: in basso (to bottom)
270deg è uguale a: a sinistra (to left)
90deg è uguale a: a destra (to right)

color-stop1, color-stop2,...

Obbligatorio. Le etichette di colore sono i colori tra cui si desidera ottenere una transizione morbida.

Questo valore è composto da un valore di colore seguito da un etichetta di colore opzionale, una o due posizioni (in percentuale tra 0% e 100% o lungo l'asse della gradazione).