Gradient linéaire CSS expliqué avec des exemples

Dans un dégradé linéaire, les couleurs sont réparties dans une seule direction, par exemple de gauche à droite, de haut en bas ou selon l'angle de votre choix.

Un dégradé avec deux arrêts de couleur

Syntaxe

Pour créer un dégradé linéaire, vous devez définir au moins deux arrêts de couleur. Ce sont les couleurs parmi lesquelles les transitions sont créées. Il est déclaré sur les propriétés d' arrière- plan ou d' image d'arrière-plan .

background: linear-gradient(direction, colour-stop1, colour-stop2, ...);

Si aucune direction n'est spécifiée, la transition par défaut est de haut en bas.

Exemples

De haut en bas:

background: linear-gradient(red, yellow);
De haut en bas

De gauche à r ight:

Pour faire de gauche à droite, vous ajoutez un paramètre supplémentaire au début de l' linear-gradient()commençant par le mot à ce qui indique la direction:

background: linear-gradient(to right, red , yellow);
De gauche à droite

Dégradés diagonaux :

Vous pouvez également effectuer une transition d'un dégradé en diagonale en spécifiant les positions de départ horizontales et verticales, par exemple en haut à gauche ou en bas à droite.

Voici un exemple de dégradé à partir du coin supérieur gauche:

 background: linear-gradient(to bottom right, red, yellow);
En haut à gauche

Utilisation d'angles pour spécifier la direction du dégradé

Vous pouvez également utiliser des angles, pour être plus précis dans la spécification de la direction du dégradé:

background: linear-gradient(angle, colour-stop1, colour-stop2);

L'angle est spécifié comme un angle entre une ligne horizontale et la ligne de dégradé.

background: linear-gradient(90deg, red, yellow);
90 degrés

Utiliser plus de deux couleurs

Vous n'êtes pas limité à deux couleurs - vous pouvez utiliser autant de couleurs séparées par des virgules que vous le souhaitez.

background: linear-gradient(red, yellow, green); 
Un dégradé avec 3 points de couleur

Vous pouvez également utiliser d'autres syntaxes de couleur comme les codes RVB ou hexadécimaux pour spécifier les couleurs.

La couleur dure s'arrête

Vous pouvez non seulement utiliser des dégradés pour effectuer une transition avec des couleurs décolorées, mais vous pouvez également l'utiliser pour passer instantanément d'une couleur unie à une autre couleur unie:

background: linear-gradient(to right,red 15%, yellow 15%);
La couleur dure s'arrête

Plus d'information:

  • Le manuel CSS: un guide pratique du CSS pour les développeurs