Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

linear-gradient() - Fonction CSS

linear-gradient()

Résumé des caractéristiques de la fonction linear-gradient()

Description rapide
Détermine un dégradé de couleur linéaire.
Statut
Standard
Pourcentages
Utilisables pour positionner les changements de couleur. Calculés par rapport à la dimension de l'élément dans le sens du dégradé.
Module W3C
Module CSS - Images
Références (W3C)
Statut du document:: CRD (document proposé pour la recommandation)

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

Dégradé linéaire

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.

Dégradé radial

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.

Dégradé conique

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.

 

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 largeur (ou la hauteur) de l'élément. Si le dégradé comporte plusieurs couleurs, elles se répartissent l'espace de façon égale.

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

Sur ce premier exemple, les couleurs du dégradé ne sont pas positionnées : le changement de couleur s'effectue progressivement sur toute la largeur de l'élément (si le dégradé était vertical, ce serait sur toute la hauteur de l'élément).

Linear-gradient

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.

Linear-gradient

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 à 25% 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.

Linear-gradient

Ce dégradé est composé de plusieurs couleurs, qui sont toutes positionnées sur la largeur. 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.

Linear-gradient

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.

Linear-gradient

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

Linear-gradient

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.

Linear-gradient

Remarque : les exemples ci-dessus 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).

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é 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é.

Dégradé avec répétition dont la couleur de fin est identique à celle de début. Cela évite les ruptures brusques.

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

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.
  • 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 :

a est l'angle de début du dégradé conique.
c est une couleur, définie dans une des syntaxes acceptées par CSS.
s1 et s2 sont des points de positionnement pour le dégradé.

linear-gradient(
Schéma syntaxique de la fonction linear-gradient()Syntaxe de linear-gradient(), fonction CSS pour la création de dégradés de couleurs linéaires. aa , c c , , s1 s1 s2 s2
)
  • &>
    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 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.

  • 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 CSS d'angle).

    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.

    Fonction linear-gradient()

  • 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 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' i c2 p2 p2'

    La valeur i 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.

Exemples.

Cliquez sur les exemples pour afficher le CSS correspondant.

Bouton
Bouton
Bouton

Simulateur.

background-image :

Démonstration avec 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.

Colonne 1
Prise en charge générale des dégradés de couleurs linéaires.
Colonne 2
Compatibilité des navigateurs avec la fonction linear-gradient().
Colonne 3
Prise en charge du positionnement des couleurs dans le dégradé, exprimés en dimensions (valeur suivie d'une unité de dimension) ou en pourcentages.
1
Lineare gradients
2
linear-gradient()
3
Stops
Estimation de la prise en charge en pourcentage du parc actuel.
93%
94%
94%

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

Oméra mini

Voir aussi, dans le même module de standardisation que linear-gradient().

Les spécifications CSS éditées par le W3C sont organisées en modules. linear-gradient() fait partie du Module CSS - Images (CSS Images Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Définit l'orientation d'une image (doit-elle être tournée ?)
Mode de mise à l'échelle des images.
Définit comment un contenu multimédia (image, vidéo) doit s'adapter aux dimensions de son contenant.
Position d'une image ou d'une vidéo par rapport à son container.

Fonctions.

Définit un dégradé de couleurs conique.
Réalise le mélange de plusieurs images.
Récupère l'aspect d'un élément sous forme d'une image.
Désigne ou définit une image.
Propose au navigateur un choix d'images.
Détermine un dégradé de couleur radial (depuis le centre vers les bords).
Définit un dégradé de couleurs conique, avec répétition
Détermine un dégradé de couleur linéaire avec répétition.
Détermine un dégradé de couleur radial avec répétition.
Définit une image en bande de couleurs.