Le type de donnée CSS <gradient> permet de représenter une <image> contenant un dégradé entre deux ou plusieurs couleurs. Un dégradé CSS n'est pas une couleur CSS (type <color>) mais une image sans dimension intrinsèque (elle n'a aucune taille naturelle ou ratio), sa taille réelle sera celle de l'élément auquel elle est appliquée.

Comme pour l'interpolation des autres couleurs, les dégradés sont calculés dans l'espace de couleurs alpha prémultiplié. Cela permet d'éviter l'apparition de nuances de gris lorsque la couleur et l'opacité varient (on peut constater ce problème avec le mot-clé transparent dans d'anciens navigateurs).

Les types de dégradés

Les dégradés linéaires

Ils sont générés à partir de la fonction linear-gradient() : la couleur évolue suivant un axe imaginaire :

body { 
  background: -moz-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
  background: -webkit-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
  background: -ms-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
  background: -o-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
  background: linear-gradient(to right,red,orange,yellow, green, blue,indigo,violet); 
}

Les dégradés radiaux

Ils sont générés à partir de la fonction radial-gradient(). Plus on s'éloigne du point d'origine, plus la couleur varie par rapport à la couleur d'origine :

body {
  background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll 0% 0% transparent;
  background: radial-gradient(red, yellow, rgb(30, 144, 255));
}

Les dégradés répétés

Ce sont des dégradés linéaires de taille fixe ou des dégradés radiaux qui sont répétés autant que nécessaire pour remplir la boîte visée :

body {
  background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
  background: repeating-linear-gradient(to top left, red, red 5px, white 5px, white 10px);
}  

Dégradé conique

Les couleurs de transitions s'appliquent progressivement autour d'un cercle. Un tel dégradé est généré avec la fonction

.

.conic-gradient {
  background: conic-gradient(lightpink, white, powderblue);
}

Spécifications

Spécification État Commentaires
CSS Images Module Level 3
La définition de '<gradient>' dans cette spécification.
Candidat au statut de recommandation Définition initiale.
CSS Images Module Level 4
La définition de '<gradient>' dans cette spécification.
Version de travail Ajout des dégradés coniques.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet Oui
Préfixée
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet OuiFirefox Support complet Oui
Notes
Support complet Oui
Notes
Notes Gradients are limited to background-image, border-image, and mask-image.
IE Support complet 10
Préfixée
Support complet 10
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Opera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet Oui
Notes
Support complet Oui
Notes
Notes Gradients are limited to background-image, border-image, and mask-image.
Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
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-
Edge Mobile Support complet OuiFirefox 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 OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
repeating-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 repeating-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-
Edge Mobile Support complet OuiFirefox 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 Oui
Support complet Oui
Support complet 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari iOS Support complet OuiSamsung Internet Android Support complet Oui
radial-gradient()Chrome Support complet 26
Support complet 26
Support complet Oui
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.
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.6 — 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -o-
Support complet 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
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(radial,…) function. This old outdated syntax is still supported for compatibility purposes.
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 26
Support complet 26
Support complet 18
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Mobile Support complet OuiFirefox 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.
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 12 — 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -o-
Support complet 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari iOS Support complet OuiSamsung Internet Android Support complet Oui
repeating-radial-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.
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 10Opera Support complet 12.1
Support complet 12.1
Aucun support 12 — 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -o-
Support complet 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
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(radial,…) function. This old outdated syntax is still supported for compatibility purposes.
WebView Android Support complet 4.4
Support complet 4.4
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet 26
Support complet 26
Support complet 18
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Mobile Support complet OuiFirefox Android Support complet 46Opera Android Support complet 12.1
Support complet 12.1
Support complet 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari iOS Support complet 7.1Samsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
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.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : mdnwebdocs-bot, SphinxKnight
Dernière mise à jour par : mdnwebdocs-bot,