Fonction CSS linear-gradient()
Exemple
Ce dégradé linéaire commence en haut. Il commence en rouge, passant au jaune, puis au bleu :
#grad {
background-image: linear-gradient(red, yellow, blue);
}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La fonction linear-gradient() définit un dégradé linéaire comme image d'arrière-plan.
Pour créer un dégradé linéaire, vous devez définir au moins deux arrêts de couleur. Les arrêts de couleur sont les couleurs parmi lesquelles vous souhaitez effectuer des transitions fluides. Vous pouvez également définir un point de départ et une direction (ou un angle) avec l'effet de dégradé.
Exemple de dégradé linéaire :
Version: | CSS3 |
---|
Prise en charge du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend entièrement en charge la fonction.
Les nombres suivis de -webkit-, -moz- ou -o- spécifient la première version qui a fonctionné avec un préfixe.
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- |
Syntaxe 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). |
Plus d'exemples
Exemple
Un dégradé linéaire qui part de la gauche. Il commence en rouge, passant au bleu :
#grad {
background-image: linear-gradient(to right, red , blue);
}
Exemple
Un dégradé linéaire qui commence en haut à gauche (et va en bas à droite) :
#grad {
background-image: linear-gradient(to bottom right, red , blue);
}
Exemple
Un dégradé linéaire avec un angle spécifié :
#grad {
background-image: linear-gradient(180deg, red, blue);
}
Exemple
Un dégradé linéaire avec plusieurs arrêts de couleur :
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Exemple
Un dégradé linéaire avec transparence :
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
Pages connexes
Tutoriel CSS : Dégradés CSS