Linear-gradient() - Fonction CSS

Schéma syntaxique de linear-gradient().

Sur le diagram, les termes en gras sont les termes prédéfinis de CSS, les autres sont décrits ci-dessous :

• colorspace est un espace colorimétrique, parmi ceux reconnus par CSS : srgb, srgb-linear, display-p3., a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50, xyz-d65.
• angle est une valeur numérique suivie d'une des unités d'angle.

Les termes utilisés sur la liste des couleurs sont décrits ci-après :

• color est une couleur, définie par l'une des syntaxes reconnues par CSS (voir Les couleurs).
• stop1 et stop2 sont des valeurs numériques suivies d'une des unités de dimension ou des pourcentages évalués par rapport à la longueur de la ligne de dégradé.
• transition est également une dimension ou un pourcentage calculé par rapport à la longueur de la ligne de dégradé.
• Autant de couleurs que nécessaires (2 au minimum) peuvent être spécifiées en les séparant par des virgules.

Description de la fonction linear-gradient().

La fonction linear-gradient() définit un dégradé de couleurs linéaire. C'est à dire que la variation de couleurs s'effectue suivant une ligne dont l'inclinaison peut être choisie. Ce dégradé peut être substitué à une image dans toutes les propriétés qui attendent une image mais son utilisation est surtout fréquente avec background-image.

Attention ! les dégradés ne peuvent pas être utilisés à la place d'une couleur, mais seulement à la place d'une image.

Qu'est ce qu'un dégradés en CSS ?

Un dégradé consiste à passer progressivement d'une couleur à une autre, voire à enchaîner plusieurs couleurs de façon progressive.

Trois types de dégradés.

Ces trois types de dégradés se distinguent par la façon dont les couleurs évoluent : suivant une ligne, à partir d'un point, suivant une circonférence...

Le dégradé linéaire.

Les couleurs évoluent suivant une tracé rectiligne, celui-ci pouvant être horizontal ou vertical, mais pouvant aussi être dirigé suivant un angle quelconque.
Les dégradés linéaires sont définis par la fonction linear-gradient(), dont la syntaxe et décrite plus bas sur cette page.
Outre les couleurs, le principal paramètre est l'angle de cet axe de variation des couleurs. Par défaut le dégradé évolue du haut vers le bas.

Le dégradé radial.

Les couleurs évoluent depuis un point, souvent central, et dans toutes les directions.
Les dégradés de ce type sont définis par la fonction radial-gradient().
Les couleurs sont paramétrables bien sûr, mais également les coordonnées du point de départ du dégradé. Sans indication, le dégradé débute au milieu de l'élément et évolue en se dirigeant vers les bords.

Le dégradé conique.

Les couleurs évoluent suivant une circonférence, autrement dit en fonction de l'angle. Le nom "conique" vient du fait que, si les couleurs sont bien choisies, on peut avoir l'impression d'une forme conique vue de dessus.
Les dégradés coniques sont définis par la fonction conic-gradient().
Les paramètres sont les couleurs et l'angle de départ. Par défaut ce dernier est à 0 degrés, comme représenté sur le schéma.

Remarque : les exemples de ce tutoriel ont été construits avec un dégradé linéaire, mais le principe est exactement le même avec les autres formes de dégradés (radial et conique).

La ligne de dégradé.

On appelle ligne de dégradé le chemin suivant lequel le dégradé évolue. Pour les dégradés linéaire ou circulaires, la ligne de dégradé est une droite. Pour les dégradés coniques, c'est un cercle ou une ellipse.

Couleurs non positionnées.

Sans indication particulière, les dégradés s'adaptent aux dimensions de l'élément sur lequel ils sont appliqués. La couleur varie de façon progressive sur toute la ligne de dégradé. Si le dégradé comporte plusieurs couleurs, elles se répartissent l'espace de façon égale.

Mais il est possible, comme nous le verrons plus loin, de fixer, d'une part les dimensions globales du dégradé, mais également la position de chacune des couleurs.

Les trois couleurs de ce dégradé ne sont pas positionnées. Elles se répartissent l'espace de façon égale : un tiers pour chaque couleur.

Évolution du dégradé de 3 couleurs non positionnées

Couleurs positionnées.

Ce dégradé comporte également trois couleurs mais qui sont positionnées : il est indiqué dans le code CSS que la deuxième couleur doit se situer à 10%, et la troisième couleur à 20% de la ligne de dégradé. On voit nettement que le dégradé se déroule sur le premier quart de la largeur, le reste de l'élément étant rempli d'une couleur fixe.

La position des couleurs peut se trouver à l'extérieur de l'élément, c'est à dire avec des pourcentages négatifs ou supérieurs à 100%. Dans ce cas le dégradé commence et se termine à l'extérieur de l'élément, mais n'est visible que sur l'élément.

Ce dégradé est composé de trois couleurs, qui sont toutes positionnées. Remarque : la couleur lightGreen a été répétée pour qu'il n'y ait pas de variation de couleur sur la partie centrale de l'élément.

Il est possible de préciser deux positions pour chaque couleur. Entre les deux positions la couleur ne varie pas. Cela évite de devoir répéter le nom d'une couleur comme nous l'avons fait dans l'exemple précédent.

En précisant des positions identiques pour deux couleurs successives, on peut annuler l'effet de dégradé. On obtient simplement un fond multicolore.

Indicateurs de transition.

Un pourcentage (ou une dimension) indiqué seul, sans information de couleur, est un indicateur de transition. Il indique où se situe la couleur médiane. Ceci permet de définir une progression non linéaire entre deux couleurs.

L'indicateur de transition entre le bleu et le rose a été fixé à 25%. On voit que la transition d'une couleur à l'autre ne se fait pas de façon linéaire entre le début et la fin.

Les dégradés avec répétition.

Dans le cas d'un dégradé dimensionné dont la taille est plus petite que celle de l'élément, le dégradé classique termine le remplissage avec la dernière couleur du dégradé, sans la faire évoluer.

Les dégradés avec répétition vont au contraire répéter le dégradé initial autant de fois que nécessaire pour couvrir toute la surface de l'élément.

Les dégradés avec répétition s'obtiennent avec les fonctions suivantes :

• repeating-linear-gradient() pour les dégradés linéaires.
• repeating-radial-gradient() pour les dégradés radiaux.
• repeating-conic-gradient() pour les dégradés coniques.

La valeur linear-gradient() peut être utilisée avec les propriétés suivantes :

• background-image : Définit l'image ou dégradé d'arrière-plan (plusieurs images ou dégradés peuvent coexister).
• border-image : Résumé des propriétés des bordures réalisées avec des images.
• image-set() : Propose au navigateur un choix d'images afin que ce dernier puisse choisir celle qui est le plus adapté (résolution, format...).
• list-style-image : Définit une image personnalisée à utiliser à la place des puces, dans le contexte d'une énumération sous forme de liste.
• mask-image : Désigne l'image ou le fichier SVG qui sera utilisé comme masque.

Syntaxes de la fonction linear-gradient().

La fonction linear-gradient(), comme les autres fonctions de dégradé, accepte de multiples syntaxes car la plupart de ses paramètres sont optionnels.

• background: linear-gradient(#add8e6, #ffa07a, ....); c1 c2 cn

  c1 à cn désignent les couleurs du dégradé. Elles peuvent être exprimées dans n'importe laquelle des syntaxes reconnues par CSS (voir Les couleurs).

  Deux couleurs au moins doivent être spécifiées. On peut en indiquer bien davantage. Le dégradé s'effectue par défaut du haut vers le bas.

  linear-gradient(#add8e6, #ffa07a)
• background: linear-gradient(90deg, #add8e6, #ffa07a, ...); a c1 c2 cn

  a est une valeur numérique suivie d'une unité angulaire (voir les unités d'angle).
  c1 à cn sont des couleurs, comme dans la syntaxe précédente.

  Au lieu d'une valeur numérique, l'angle peut être indiqué par l'une des valeurs prédéfinies suivantes :

  1. to right : le gradient évolue horizontalement depuis le bord gauche vers le bord droit.
  2. to left : le gradient évolue horizontalement depuis le bord droit vers le bord gauche.
  3. to top : le gradient évolue verticalement, de bas en haut.
  4. to bottom : le gradient évolue verticalement du haut vers le bas.
  5. to top left : le gradient évolue en diagonale depuis le coin en bas à droite vers le coin en haut à gauche.
  6. to top right : le gradient évolue en diagonale depuis le coin en bas à gauche vers le coin en haut à droite.
  7. to bottom right : le gradient évolue en diagonale depuis le coin en bas à gauche vers le coin en bas à droite.
  8. to bottom left : le gradient évolue en diagonale depuis le coin en haut à droite vers le coin en bas à gauche.

  

• background: linear-gradient(90deg,#add8e6 0%, #ffa07a 30%, #90ee90 100%,...); a c1 p1 c2 p2 c3 p3...

  Dans cette forme plus complète, la syntaxe de linear-gradient() accepte une série de paires de valeurs séparées par des virgules. Chaque paire de valeurs est composée d'une couleur et d'une valeur numérique suivie d'une unité de dimension ou d'un pourcentage.
  Il est ainsi possible de positionner chacune des couleurs dans le dégradé.
  Les positions p1 à pn doivent être spécifiées en ordre croissant.
• background: linear-gradient(90deg, lightBlue 0% 40%, pink 60% 100%); a c1 p1 p1' c2 p2 p2'

  Chacune des couleurs peut être suivie par deux positions. Entre ces deux positions la couleur ne varie pas. Il s'agit d'une simplification d'écriture, qui évite de répéter le nom d'une couleur lorsqu'elle ne varie pas.

  Ce dégradé ne se fait que entre 40% et 60% de la ligne de dégradé. Il a été obtenu avec :

  lightBlue 0% 40%, pink 60% 100%

  Ce qui est équivalent à :

  lightBlue 0%, lightBlue 40%, pink 60%, pink 100%
• background: linear-gradient(90deg, lightBlue 0% 10%, 30%, pink 90% 100%); a c1 p1 p1' t c2 p2 p2'

  La valeur t est un pourcentage (ou une dimension) précisé entre deux virgules, et sans indication de couleur. Il s'agit d'un indicateur de transition. Il indique où doit se situer la couleur médiane entre la couleur précédente et la couleur suivante. Ceci permet de définir des transitions non linéaires entre deux couleurs.
• background: linear-gradient(in srgb 90deg, lightBlue, pink); cs a c1 c2'

  La valeur cs, introduite par le mot in, permet de spécifier dans quel espace de couleurs doivent être calculées les interpolations. Sans indication, les interpolations se calculent dans l'espace oklab.

  Les exemples ci-dessous montrent l'interpolation dans trois espaces de couleurs différents. La différences peut ne pas sauter aux yeux, pourtant, si on regarde attentivement l'interpolation en srgb on distingue une zone plus sombre dans le passage du rouge au vert. Ce défaut n’apparaît pas en oklab, ni dans l'espace lab.

  in oklab
  in srgb
  in lab

  
  Les espaces de couleurs reconnus sont en constante évolution. Citons : srgb, srgb-linear, display-p3., a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50, xyz-d65, auxquels il faut ajouter hsl, hwb, etc.

Exemples.

Voici quelques exemples d'utilisation des dégradés, mais les possibilités sont infinies.

Simulateur avec la fonction linear-gradient().

Compatibilité et prise en charge suivant les navigateurs.

Les navigateurs actuels traitent correctement les dégradés de couleurs linéaires, y compris avec une indication de pourcentage après chacune des couleurs.

Remarques :

(1) Internet explorer supporte les gradients via sa propriété non standard -ms-filter: progid:DXImageTransform.Microsoft.Gradient().

1

Dégradés
linéaires

2

Fonction
linear-gradient()

3

Double
stops

Estimation de la prise en charge globale.

96%

96%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

1

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Chrome

Edge

Androïd Brower

Chrome pour Androïd

Opéra

Safari

Firefox

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Historique de la fonction linear-gradient().

• Module CSS - Image niveau 3

  Introduction des dégradés utilisables à la place d'une image, et première définition des fonctions linear-gradient() et repeating-linear-gradient().
  

  23 Juillet 2009

  Document de travail.

  

  17 Avril 2012

  Candidat à la recommandation.

  

  

• Module CSS - Images et contenu remplacé

  Les fonctions de dégradés permettent de spécifier quel espace de couleur utiliser pour l'interpolation des couleurs.
  

  11 Septembre 2012

  Document de travail.

  

  

  

Voir aussi : autres manipulations d'images.

La fonction linear-gradient() est décrite dans la spécification "module CSS - Images" (CSS Images Module).
Les définitions suivantes sont également décrites dans ce même module.

Propriétés :

Fonctions :