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 :

CSS - Fonction linear-gradient()

linear-gradient() est une fonction du langage CSS qui calcule un dégradé de couleurs linéaire. Celui-ci peut être utilisé à la place d'une image (et non à la place d'une couleur) avec toutes les propriétés qui traitent une image.

Contenu de cette page :

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.

Présentation générale des 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.

 

Les dimensions des dégradés.

Sans indication particulière, les dégradés n'ont pas de dimensions, c'est à dire qu'ils 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 de fixer, d'une part les dimensions globales du dégradé, mais également les emplacements des points de changement de couleurs.

Sur ce premier exemple, le dégradé n'est pas dimensionné : 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).

Ce dégradé n'est pas dimensionné et comporte trois couleurs. Celles-ci se répartissent l'espace de façon égale : un tiers pour chaque couleur.

Ce dégradé est dimensionné : 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.

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.

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 nos l'avons fait dans l'exemple précédent.
Internet Explorer ne traite pas cette syntaxe.

En précisant des positions identiques pour deux couleurs successives, on peut annuler l'effet de dégradé. On obtient un fond multicolore.
Internet Explorer ne traite pas cette syntaxe.

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 :

Syntaxe de la fonction linear-gradient().

La fonction accepte de multiples syntaxes, la plupart des paramètres étant 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 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 angulaires en CSS).

    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 sa forme la 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.

    Le dégradé ci-contre 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%

Simulateur.

background-color:
( a c1 p1 c2 p2 )

Exemples.

Cliquez sur les exemples pour afficher le CSS correspondant.

Arc-en-ciel
Bouton
Bouton
Bouton

Compatibilité et prise en charge suivant les navigateurs.

La plupart des navigateurs traitent correctement les dégradés de couleurs linéaires et radials.

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Arrière-plan - Propriétés.

Arrière-plan - Fonctions.