CSS linear-gradient() Funzione
❮ Riferimento alle funzioni CSS
Esempio
Questo gradiente lineare inizia in alto. Inizia in rosso, passa al giallo, quindi al blu:
#grad {
background-image: linear-gradient(red, yellow, blue);
}
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
La funzione linear-gradient() imposta un gradiente lineare come immagine di sfondo.
Per creare un gradiente lineare è necessario definire almeno due interruzioni di colore. Le interruzioni di colore sono i colori tra i quali si desidera rendere uniformi le transizioni. Puoi anche impostare un punto iniziale e una direzione (o un angolo) insieme all'effetto sfumatura.
Esempio di gradiente lineare:
Versione: | CSS3 |
---|
Supporto del browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la funzione.
I numeri seguiti da -webkit-, -moz- o -o- specificano la prima versione che ha funzionato con un prefisso.
Function | |||||
---|---|---|---|---|---|
linear-gradient() | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
Sintassi CSS
background-image: linear-gradient(direction, color-stop1,
color-stop2, ...);
Value | Description |
---|---|
direction | Defines a starting point and a direction (or an angle) along with the gradient effect. |
color-stop1, color-stop2,... | Color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a percentage between 0% and 100% or a length along the gradient axis). |
Altri esempi
Esempio
Un gradiente lineare che parte da sinistra. Inizia in rosso, passando al blu:
#grad {
background-image: linear-gradient(to right, red , blue);
}
Esempio
Un gradiente lineare che inizia in alto a sinistra (e va in basso a destra):
#grad {
background-image: linear-gradient(to bottom right, red , blue);
}
Esempio
Un gradiente lineare con un angolo specificato:
#grad {
background-image: linear-gradient(180deg, red, blue);
}
Esempio
Un gradiente lineare con più interruzioni di colore:
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Esempio
Un gradiente lineare con trasparenza:
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
Pagine correlate
Tutorial CSS: Gradienti CSS
❮ Riferimento alle funzioni CSS