Les dégradés coniques
Les dégradés coniques sont définis à l’aide de la fonction CSS conic-gradient().
Comme pour les autres types de dégradés, l’utilisation simple consiste à indiquer uniquement les couleurs à utiliser : conic-gradient(purple, blue, green, yellow, orange, red).
Cela donne ce résultat :
Par défaut un dégradé conique est centré au milieu de l’élément sur lequel il est appliqué, et démarre de 0° (au milieu du côté supérieur). Le centre ainsi que l’angle de départ peuvent bien entendu être modifiés.
conic-gradient(at 25% 75%, purple, blue, green, yellow, orange, red)conic-gradient(from 38deg, purple, blue, green, yellow, orange, red)Plus de personnalisation
Par défaut, sur tous les types de dégradés, les différentes couleurs sont réparties de manière équidistante le long du/des axe(s) du dégradé.
Il est possible d’indiquer précisément la position des arrêts de couleurs, en différentes unités (px, %…), le long du dégradé.
linear-gradient(to right, red 25%, green 75%, blue)La manière dont se passe la transition entre deux arrêts de couleur est également modifiable en indiquant la position à laquelle doit se trouver le milieu de cette transition, par rapport à l’ensemble du dégradé. Par défaut, le milieu de transition se trouve à mi-chemin entre deux arrêts de couleur.
linear-gradient(to right, red, 15%, green, 95%, blue)Conclusion
J’espère que comme d’habitude mon article vous a été utile et que vous êtes maintenant devenus des pros des dégradés CSS ;-)
Si vous voulez creuser un peu plus le sujet, je vous recommande la partie traitant des dégradés CSS sur MDN Web Docs (en anglais), qui m’a servi de référence pour rédiger le présent article.