La fonction linear-gradient() permet de créer une image (type <image>) représentant un dégradé de couleur linéaire. Le résultat de la fonction sera un objet CSS <gradient>.

Comme pour les autres types de dégradés, la valeur obtenue n'est pas une couleur CSS (type <color> mais une image sans dimension intrinsèque. Autrement dit, celle-ci ne possède aucune taille « naturelle » ou préférée, sa taille réelle correspondra à la taille de l'élément auquel elle est appliquée.

Les dégradés linéaires sont définis par un axe : la ligne du dégradé. Chaque point de cette ligne aura une couleur différente. Les lignes perpendiculaires à la ligne du dégradé ont chacune une couleur qui est celle du point se situant sur la ligne du dégradé à ce niveau.

linear-gradient.png

La ligne du dégradé est définie par le centre de la boîte contenant le dégradé et par un angle. Les couleurs du dégradé sont définies par différents points : le point de départ et le point d'arrivée. Entre ces deux points, on peut avoir différents points d'arrêt définissant la couleur à ce niveau.

Le point de départ utilise la couleur initiale du dégradé. Ce point est défini comme l'intersection de la ligne du dégradé et de la ligne perpendiculaire à cette droite et qui passe par le coin de la boîte situé dans le même quadrant.

De la même façon, le point d'arrivée est le point de la ligne du dégradé où la couleur finale est atteinte. Il peut également être défini comme l'intersection entre la ligne du dégradé et une ligne perpendiculaire, passant par le coin le plus proche.

Ces définitions plutôt complexes ont des conséquence plutôt intéressantes : les coins les plus proches de ces deux points (parfois appelés « coins magiques ») ont les couleurs de départ et de fin.

Il est possible de définir des couleurs intermédiaires grâce à des points d'arrêt de couleurs qui seront situés sur la ligne du dégradé. Cela permet de créer une transition non linéaire ou d'utiliser plusieurs couleurs sur un seul dégradé. 

Lorsque la position d'un point d'arrêt est définie de façon implicite, celui-ci sera placé à mi-chemin entre le point précédent et le point suivant. Sa position pourra aussi être définie explicitement grâce à une valeur <length> ou <percentage>.

La fonction linear-gradient ne permet pas de répéter le motif du dégradé. Pour cela, on pourra utiliser la propriété repeating-linear-gradient.

Note : Les dégradés sont des valeurs de type <image> et non des couleurs (type <color>. Aussi, linear-gradient ne pourra pas être utilisée sur background-color et sur les autres propriétés qui n'acceptent que des valeurs de type <color>.

Paramétrer des dégradés

En ajoutant plus de points d'arrêt de couleurs sur la ligne du dégradé, il est possible de créer des transitions complexes entre plusieurs couleurs. La position d'un point d'arrêt peut être définie de façon explicite en utilisant une longueur (valeur de type <length>) ou un pourcentage (valeur de type <percentage>). Si l'emplacement du point d'arrêt n'est pas indiqué, il sera placé à mi-chemin entre les deux points d'arrêt adjacents. Aussi, les deux instructions suivantes sont synonymes :

linear-gradient(red, orange, yellow, green, blue);
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);

Par défaut, la transition entre les couleurs de deux points d'arrêt se fait de façon linéaire et la couleur intermédiaire se situera à mi-chemin. Toutefois, il est possible de déplacer cette couleur intermédiaire entre les deux points d'arrêt en fournissant une indication sur l'emplacement du milieu de la transition. L'instruction qui suit permet de définir un dégradé qui commence par du rouge allant jusqu'à 10%, passe du rouge au bleu avec la couleur intermédiaire située à 30% de la ligne puis finit en bleu pur sur les 10% de la fin de la longueur.

linear-gradient(red 10%, 30%, blue 90%);

Si deux points d'arrêt de couleur sont situés au même emplacement, il y aura une ligne de rupture brutale entre les deux couleus des deux points d'arrêts.

L'ordre des points d'arrêt est important. Si les points d'arrêt ne sont pas déclarés dans l'ordre, les points d'arrêts de valeur inférieure et situés après surchargeront les points précédents. Autrement dit, si une valeur supérieure est située avant une valeur inférieure, la première n'aura aucun effet. Avec le fragment de code qui suit, on obtient un dégradé qui commence en rouge, passe en jaune à 30% puis à bleu à 65%.

linear-gradient(red 40%, yellow 30%, blue 65%);

Il est possible de définir plusieurs positions d'arrêt sur une même couleur pour des points d'arrêt adjacents. Ainsi, les trois dégradés suivants sont équivalents :

linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90%);
linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);

Par défaut, lorsqu'aucune couleur n'est définie pour le point d'arrêt 0%, c'est la couleur du premier point d'arrêt qui est utilisée au début du dégradé. De même, si aucune couleur n'est explicitement déclarée pour la position 100%, c'est la couleur du dernier point d'arrêt qui sera prolongée.

Syntaxe

/* Un dégradé suivant une ligne à 45°
 qui démarre en bleu et finit en rouge */
linear-gradient(45deg, blue, red);           

/* Un dégradé qui démarre en bas à droite,
   qui démarre en bleu et finit en rouge */
linear-gradient(to left top, blue, red);

/* Un dégradé qui démarre du bas et va vers le haut
   qui commence en bleu, passe en vert à 40% et termine 
   en rouge */
linear-gradient(0deg, blue, green 40%, red);

/* Indication de couleur : un dégradé de gauche à droite
   qui commmence en rouge et dont la couleur intermédiaire
   est située à 10% et laisse les 90% pour la seconde
   moitié de la transition vers le bleu */
linear-gradient(.25turn, red, 10%, blue);

/* Plusieurs points d'arrêt par couleur : un dégradé
   orienté de 45° avec une moitié inférieure gauche
   rouge et une moitié supérieure droite bleue avec
   une ligne franche au milieu */
linear-gradient(45deg, red 0 50%, blue 50% 100%);

Valeurs

<side-or-corner>
Représente la position du point de départ de la ligne du dégradé. Elle consiste en deux mots-clés : le premier indique le côté horizontal : left ou right ; le second indique le côté vertical : top ou bottom. L'ordre n'est pas pertinent et chaque mot-clé est optionnel. Si la valeur est absente, elle vaudra to bottom par défaut. Les valeurs to top, to bottom, to left et to right correspondent respectivement aux angles 0deg, 180deg, 270deg, 90deg. Les autres valeurs sont traduites en angles à partir de to top et dans le sens des aiguilles d'une montre. Le point d'arrivé est défini comme le symétrique du point de départ par rapport au centre de la boîte.
<angle>
L'angle de la direction du dégradé. L'angle démarre à partir de to top et progresse dans le sens des aiguilles d'une montre. Pour plus de détails, voir <angle>.
<linear-color-stop>
Un valeur composée d'une valeur <color> éventuellement suivie d'une position (un pourcentage ou une longueur <length>) sur l'axe du dégradé. L'affichage des points d'arrêt de couleur en CSS suit les mêmes règles que les dégradés SVG.
<color-hint>
Cette valeur est une indication pour l'emplacement de la couleur moyenne entre les deux couleurs des points d'arrêt adjacents. Si cette valeur n'est pas utilisée, la moitié de la transition se produit à équidistance entre les deux points d'arrêt.

Note : Le rendu des points d'arrêts de couleur pour les dégradés CSS suit les mêmes règles que celui pour les points d'arrêts de couleur pour les dégradés SVG.

Syntaxe formelle

linear-gradient(
  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
  \---------------------------------/ \----------------------------/
    Définition de la ligne du dégradé   Liste des arrêts de couleur

où <side-or-corner> = [ left | right ] || [ top | bottom ]
  et <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
  et <linear-color-stop> = <color> [ <color-stop-length> ]?
  et <color-stop-length> = [ <percentage> | <length> ]{1,2}
  et <color-hint> = [ <percentage> | <length> ]

Exemples

Dégradé à 45 degrés

CSS

div {
  background: linear-gradient(135deg, red, blue);
}

HTML

<div style="width: 200px; height: 200px;"></div>

Résultat

Décalage du début

Parfois, on veut que le dégradé commence après le début de la ligne. Pour cela, on ajoute un point d'arrêt de la même couleur que la couleur de début.

CSS

div {
  background: linear-gradient(135deg, red, red 60%, blue);
}

HTML

<div style="width: 200px; height: 200px;"></div>

Résultat

Un dégradé avec plusieurs couleurs

Si la position du premier point d'arrêt n'est pas définie par une valeur <length> ou <percentage>, sa valeur par défaut sera 0%. Si la position du dernier point d'arrêt n'est pas définie par une valeur <length> ou <percentage>, sa valeur par défaut sera 100%. Si un point d'arrêt n'a aucune indication de position et que ce n'est ni le premier ni le dernier, celui-ci sera situé à mi-chemin entre les deux points d'arrêts qui l'entourent.

Les points d'arrêt doivent être définis dans l'ordre. Une fois les valeurs associées au premier et au dernier point d'arrêt, si la position d'un point d'arrêt intermédiaire est définie « avant » un point d'arrêt déclaré avant, la position réelle du point d'arrêt intermédiaire sera ramenée à la position du point d'arrêt précédent.

CSS

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

HTML

<div>Un arc-en-ciel dégradé</div>

Résultat

Répéter un dégradé linéaire

La fonction linear-gradient ne permet pas de répéter un dégradé (par défaut le dégradé sera étiré pour remplir tout l'élément). Pour obtenir cette répétition, il faudra utiliser la fonction repeating-linear-gradient.

Utiliser la transparence

CSS

div {
  background: linear-gradient(to bottom right, red, rgba(0,0,0,0));
}

HTML

<div>Un dégradé linéaire avec de la transparence</div>

Résultat

Des dégradés pour les différents navigateurs

Chaque moteur possède des préfixes différents. Voici un dégradé allant du rose vers le vert et de haut en base, exprimé avec les différents préfixes :

.grad { 
  background-color: #F07575; /* fallback color if gradients are not supported */
  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
  background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Firefox (3.6 to 15) */
  background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */ 
  background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */
}

Le préfixe -moz- est utilisé pour une compatibilité avec Firefox 3.6 jusqu'à Firefox 15. L (Fx 3.6 to Fx 15). Le préfixe -webkit- est le seul qui doit toujours être inclus pour Android 4.3-, iOS jusqu'à la version 6.1 et Safari 6. Lorsqu'on utilise une version préfixée, il ne faut pas utiliser to.

Un dégradé avec des points d'arrêt à plusieurs couleurs

Cet exemple utilise des points d'arrêt situés à la même position et avec des couleurs différentes. La transition est donc franche et on obtient ainsi des bandes de couleurs.

body {
  background: linear-gradient(to right, 
     red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
}

Note : Voir la page Utiliser les dégradés CSS pour plus d'exemples.

Spécifications

Spécification État Commentaires
CSS Images Module Level 3
La définition de 'linear-gradient()' dans cette spécification.
Candidat au statut de recommandation Définition initiale.
CSS Images Module Level 4
La définition de 'Gradient Color-Stops' dans cette spécification.
Version de travail Ajout des indices d'interpolation.

Compatibilité des navigateurs

Voir aussi

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
linear-gradient()Chrome Support complet 26
Support complet 26
Support complet 10
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12Firefox Support complet 16
Notes
Support complet 16
Notes
Notes Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
Support complet 3.6
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Notes Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 44
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 10
Notes
Support complet 10
Notes
Notes Internet Explorer 5.5 through 9.0 supported gradients via a proprietary filter: -ms-filter: progid:DXImageTransform.Microsoft.Gradient().
Opera Support complet 12.1
Support complet 12.1
Aucun support 11 — 15
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -o-
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Support complet 15
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Safari Support complet 6.1
Support complet 6.1
Support complet 5.1
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Safari 4 was supporting an experimental -webkit-gradient(linear,…) function. It is more limited than the later standard version: you cannot specify both a position and an angle like in linear-gradient(). This old outdated syntax is still supported for compatibility purposes.
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
WebView Android Support complet Oui
Support complet Oui
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet Oui
Support complet Oui
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Android Support complet 16
Notes
Support complet 16
Notes
Notes Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
Support complet 4
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Notes Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 44
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 12.1
Support complet 12.1
Aucun support 11 — 14
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -o-
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Support complet 14
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Safari iOS Support complet OuiSamsung Internet Android Support complet Oui
to keywordChrome Support complet 26Edge Support complet 12Firefox Support complet 10IE Support complet 10Opera Support complet 12.1Safari Support complet 6.1WebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet 10Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
Double-position color stopsChrome Support complet 71Edge Aucun support NonFirefox Support complet 64IE Aucun support NonOpera Support complet 58Safari Support complet 12.1WebView Android Support complet 71Chrome Android Support complet 71Firefox Android Support complet 64Opera Android Support complet 50Safari iOS Support complet 12.2Samsung Internet Android Support complet Oui
Interpolation Hints / Gradient MidpointsChrome Support complet 40Edge Aucun support NonFirefox Support complet 36IE Aucun support NonOpera Support complet 27Safari Support complet 6.1WebView Android Support complet 40Chrome Android Support complet 40Firefox Android Support complet 36Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
Unitless 0 for <angle>Chrome Support complet 26Edge Support complet 12Firefox Support complet 55
Support complet 55
Support partiel 46
Notes
Notes Accepted only in -webkit-linear-gradient() and -moz-linear-gradient(), not linear-gradient().
IE Aucun support NonOpera Support complet 16Safari Support complet 6.1WebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet 55
Support complet 55
Support partiel 46
Notes
Notes Accepted only in -webkit-linear-gradient() and -moz-linear-gradient(), not linear-gradient().
Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Étiquettes et contributeurs liés au document

Étiquettes : 
Dernière mise à jour par : edspeedy,