Gradients

The CSS Podcast - 021: Gradients

Imaginez que vous devez créer un site. En haut, il y a une introduction avec un titre, un résumé et un bouton. Le concepteur a fourni une conception avec un arrière-plan violet pour cette introduction. Le seul problème est que l'arrière-plan présente deux nuances de violet en dégradé. Comment procéder ?

Vous pourriez penser au départ que vous devrez exporter une image à partir de votre outil de conception pour ce faire, mais vous pouvez utiliser un linear-gradient à la place.

Un dégradé est une image et peut être utilisé partout où les images peuvent l'être, mais il est créé avec CSS et se compose de couleurs, de nombres et d'angles. Les dégradés CSS vous permettent de créer tout ce que vous voulez, d'un dégradé fluide entre deux couleurs à des illustrations impressionnantes en mélangeant et en répétant plusieurs dégradés.

Dégradé linéaire

La fonction linear-gradient() génère une image de deux couleurs ou plus, de manière progressive. Il nécessite plusieurs arguments, mais dans sa configuration la plus simple, vous pouvez transmettre des couleurs comme celle-ci. Elles seront alors automatiquement réparties de manière égale, tout en étant mélangées.

.my-element {
    background: linear-gradient(black, white);
}

Vous pouvez également transmettre un angle ou des mots clés qui représentent un angle. Si vous choisissez d'utiliser des mots clés, spécifiez une direction après le mot clé to. Cela signifie que si vous souhaitez un dégradé noir et blanc, qui s'étend de gauche (noir) à droite (blanc), vous devez spécifier l'angle en tant que to right comme premier argument.

.my-element {
    background: linear-gradient(to right, black, white);
}

Valeur de couleur définie à l'endroit où une couleur s'arrête et se mélange à ses voisines. Pour un dégradé commençant par une nuance sombre de rouge à 45 degrés, qui passe à un rouge plus clair à 30% de la taille du dégradé :

.my-element {
    background: linear-gradient(45deg, darkred 30%, crimson);
}

Vous pouvez ajouter autant de couleurs et d'arrêts de couleur que vous le souhaitez dans un linear-gradient(), et superposer des dégradés en les séparant par une virgule.

Dégradé radial

Pour créer un dégradé qui rayonne de manière circulaire, la fonction radial-gradient() intervient. Il est semblable à linear-gradient(), mais au lieu de spécifier un angle, vous pouvez spécifier une position et une forme de fin. Si vous spécifiez uniquement des couleurs, radial-gradient() sélectionne automatiquement la position en tant que center et sélectionne un cercle ou une ellipse, en fonction de la taille de la zone.

.my-element {
    background: radial-gradient(white, black);
}

La position du dégradé est semblable à celle de background-position à l'aide de mots clés et/ou de valeurs numériques. La taille du dégradé radial détermine la taille de la forme de fin du dégradé (cercle ou ellipse). Par défaut, elle est de farthest-corner, ce qui signifie qu'elle correspond exactement au coin le plus éloigné du centre de la zone. Vous pouvez également utiliser les mots clés suivants:

• closest-corner rencontrera le coin le plus proche du centre du dégradé.
• closest-side rencontre le côté de la boîte le plus proche du centre du dégradé.
• farthest-side fera l'inverse de closest-side.

Vous pouvez ajouter autant d'arrêts de couleur que vous le souhaitez, comme avec linear-gradient. De même, vous pouvez ajouter autant de radial-gradients que vous le souhaitez.

Dégradé conique

Un dégradé conique comporte un point central dans votre zone, et commence en haut (par défaut), puis fait le tour en 360 degrés.

.my-element {
    background: conic-gradient(white, black);
}

La fonction conic-gradient() accepte des arguments de position et d'angle.

Par défaut, l'angle est de 0 degré, ce qui correspond au point supérieur central. Si vous définissez l'angle sur 45deg, il s'agit de l'angle supérieur droit. L'argument "angle" accepte tout type de valeur d'angle, comme les dégradés linéaires et radiaux.

Par défaut, la position est au centre. Comme pour les dégradés radiaux et linéaires, le positionnement peut être basé sur des mots clés ou défini avec des valeurs numériques.

Vous pouvez ajouter autant d'arrêts de couleur que vous le souhaitez, comme avec les autres types de dégradés. Un bon cas d'utilisation de cette fonctionnalité, avec des dégradés coniques, est le rendu de graphiques circulaires avec CSS.

Répéter et mélanger

Chaque type de dégradé possède également un type répétitif. Il s'agit de repeating-linear-gradient(), repeating-radial-gradient() et repeating-conic-gradient(). Elles sont semblables aux fonctions non répétitives et acceptent les mêmes arguments. La différence est que si le dégradé défini peut être répété pour remplir la zone, en fonction de ses deux tailles, il le sera.

Si votre dégradé ne semble pas se répéter, vous n'avez probablement pas défini de longueur pour l'un des arrêts de couleur. Par exemple, vous pouvez créer un arrière-plan rayé avec un repeating-linear-gradient en définissant les longueurs des arrêts de couleur.

.my-element {
  background: repeating-linear-gradient(
    45deg,
    red,
    red 30px,
    white 30px,
    white 60px
  );
}

Vous pouvez également mélanger des fonctions de dégradé sur les propriétés background, ainsi que définir autant de dégradés que vous le souhaitez, comme vous le feriez avec une image de fond. Par exemple, vous pouvez mélanger plusieurs dégradés linéaires ou deux dégradés linéaires avec un dégradé radial.

Interpolation et espaces colorimétriques

Chaque type de dégradé peut interpoler des couleurs de différentes manières à l'aide d'espaces de couleurs et du mot clé in. Cette option vous permet de personnaliser les résultats entre deux arrêts de couleur dans un dégradé.

Par exemple, vous pouvez utiliser l'espace de couleurs oklab pour supprimer généralement les couleurs intermédiaires non saturées et obtenir un dégradé plus sûr et plus vif.

.my-element {
  background: linear-gradient(in oklch, deeppink, yellow);
}

La démonstration suivante vous permet de comparer le même dégradé avec et sans interpolation personnalisée. Essayez de modifier les espaces de couleurs pour voir comment ils se comparent, ou même de modifier les couleurs pour voir comment l'interpolation affecte le dégradé.

En plus de personnaliser l'interpolation, les espaces de couleurs cylindriques (TSL, HWB, LCH et OKLCH) proposent les mots clés shorter (par défaut) ou longer pour spécifier si la ligne de dégradé doit suivre le chemin long autour de la roue chromatique ou le chemin court entre les deux couleurs.

.my-element {
  background: linear-gradient(in oklch longer hue, deeppink, yellow);
}

Ressources

• Guide MDN sur les gradients
• Générateur de dégradé
• Conic.css : collection utile de dégradés coniques

Vérifier vos connaissances

Tester vos connaissances sur les dégradés

Quel est le nombre minimal de couleurs requis pour créer un dégradé ?

1

Essayez encore.

2

Elles peuvent être de la même couleur et apparaître comme unie, mais oui, au moins deux couleurs sont requises.

3

Essayez encore.

4

Essayez encore.

Les éléments peuvent-ils avoir plusieurs dégradés en arrière-plan ?

Vrai

La propriété background-image permet de définir de nombreux dégradés. Il vous suffit de les séparer par une virgule.

Faux

Mais si !