Linear-gradient() - Fonction CSS
Résumé des caractéristiques de la fonction linear-gradient()
Schéma syntaxique de linear-gradient().
linear-gradient()La liste des couleurs (colors-list) se décrit de cette façon :
Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :
colorspaceest un espace colorimétrique, parmi ceux reconnus par CSS :srgb,srgb-linear,display-p3,a98-rgb,prophoto-rgb,rec2020,xyz,xyz-d50,xyz-d65.angleest une valeur numérique suivie d'une unité d'angle.
Les termes utilisés sur la liste des couleurs sont décrits ci-après :
colorest une couleur, définie par l'une des syntaxes reconnues par CSS (voir les couleurs CSS).stop1etstop2sont des valeurs numériques suivies d'une unité de dimension ou des pourcentages évalués par rapport à la longueur de la ligne de dégradé.transitionest é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.
Le dégradé évolue suivant une droite mais dans toutes les directions.
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 largeur de l'élément.
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.
Dégradé sans répétition, et avec une dimension plus petite que celle de l'élément. Le remplissage est terminé avec une couleur fixe.
Dégradé avec répétition et une dimension plus petite que celle de l'élément. Le remplissage est terminé en répétant le dégradé.
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 fonction linear-gradient() peut être utilisée avec :
background-image: Image d'arrière-plan.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.list-style-image: Définit une image à utiliser à la place des puces.mask-image: Désigne l'image ou le fichier SVG qui sera utilisé comme masque.
Syntaxe 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àcndésignent les couleurs du dégradé. Elles peuvent être exprimées dans n'importe laquelle des syntaxes reconnues par CSS (voir les couleurs CSS).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
aest une valeur numérique suivie d'une unité angulaire (voir les unités CSS d'angle).
c1àcnsont 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 :
to right: le gradient évolue horizontalement depuis le bord gauche vers le bord droit.to left: le gradient évolue horizontalement depuis le bord droit vers le bord gauche.to top: le gradient évolue verticalement, de bas en haut.to bottom: le gradient évolue verticalement du haut vers le bas.to top left: le gradient évolue en diagonale depuis le coin en bas à droite vers le coin en haut à gauche.to top right: le gradient évolue en diagonale depuis le coin en bas à gauche vers le coin en haut à droite.to bottom right: le gradient évolue en diagonale depuis le coin en bas à gauche vers le coin en bas à droite.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 positionsp1àpndoivent ê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 de la couleur.
Ce dégradé ne se fait que entre 40% et 60% de la largeur de l'élément. 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
test 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 motin, permet de spécifier dans quel espace de couleurs doivent être calculées les interpolations. Sans indication, les interpolations se calculent dans l'espaceoklab.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
srgbon distingue une zone plus sombre dans le passage du rouge au vert. Ce défaut n’apparaît pas enoklab, ni dans l'espacelab.in oklabin srgbin 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.
Exemples.
Cliquez sur les exemples pour afficher le CSS correspondant.
Simulateur.
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.
linear-gradient().
linéaires
linear-gradient()stops
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Opéra mini
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 fonctionslinear-gradient()etrepeating-linear-gradient().
23 Juillet 2009Document de travail.
17 Avril 2012Candidat à 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 2012Document 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.