Fonction CSS linear-gradient()

Exemple

L'exemple suivant illustre un dégradé linéaire partant du haut, commençant par du rouge, passant au jaune, puis au bleu :

#grad { background-image: linear-gradient(red, jaune, bleu); }

Essayez-le vous-même »

Définition et utilisation

La fonction linear-gradient() est utilisée pour créer une image représentant un dégradé linéaire de deux couleurs ou plus.

Pour créer un dégradé linéaire, vous devez spécifier deux couleurs. Vous pouvez également obtenir des effets de dégradé dans différentes directions (spécifiées sous forme d'angle). Si aucune direction n'est spécifiée, le dégradé s'applique par défaut de haut en bas.

/*De haut en bas, un dégradé de bleu à rouge.*/ linear-gradient(bleu, rouge); /*L'axe du dégradé est à 45 degrés, passant du bleu au rouge.*/ linear-gradient(45deg, bleu, rouge); /*Du bas à droite vers le haut à gauche, dégradé de bleu à rouge*/ linear-gradient(to left top, bleu, rouge); /*De bas en haut, commençant par un dégradé bleu, à 40% de hauteur le dégradé vert commence, et se termine finalement par du rouge*/ linear-gradient(0deg, bleu, vert 40%, rouge);

Générateur de dégradé de couleurs CSS en ligne :https://www.jyshare.com/front-end/9921/。

Exemples de dégradés linéaires

Version prise en charge : CSS3

Prise en charge des navigateurs

Les nombres dans le tableau indiquent la première version de navigateur qui prend en charge la fonction.

Les nombres spécifiés avec "webkit", "moz" ou "o" indiquent le premier préfixe de numéro de version qui prend en charge la fonction.

Fonction
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, ...);

Valeur	Description
direction	Utilisez une valeur d'angle pour spécifier la direction (ou l'angle) du dégradé.
color-stop1, color-stop2,...	Utilisé pour spécifier les couleurs de début et de fin du dégradé.