<gradient>

Le type de données 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.

Il existe trois sortes de dégradés de couleurs :

  • les dégradés linéaires, 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, 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, qui 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);
    }  

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.

Spécification

Spécification État Commentaires
CSS Image Values and Replaced Content Module Level 3
La définition de '<gradient>' dans cette spécification.
Candidat au statut de recommandation  

Compatibilité des navigateurs

Chaque type de dégradé possède une matrice de compatibilité distincte, veuillez consulter les différents articles à ce sujet.

Voir aussi

Étiquettes et contributeurs liés au document

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