Qu’est-ce qu’un dégradé CSS ?
Créez des dégradés linéaires, radiaux et coniques avec des points de couleur déplaçables, des modes de fusion et du CSS prêt à l’emploi.
Un dégradé CSS est une image générée par le navigateur à partir d’une transition douce entre des couleurs. Comme il est calculé au rendu, il s’adapte à toute taille sans pixellisation et ne nécessite pas de fichiers image.
Il existe trois types : linéaire (direction ou angle), radial (cercle ou ellipse à partir d’un centre) et conique (balayage autour d’un centre). Chaque dégradé est défini par des points d’arrêt; chaque point peut inclure une position et une transparence pour contrôler le mélange.
On peut superposer plusieurs dégradés en les séparant par des virgules dans background-image et les combiner avec background-blend-mode pour obtenir des textures plus riches. CSS permet aussi l’interpolation dans des espaces colorimétriques comme oklch pour des transitions plus régulières.
- Les dégradés linéaires sont parfaits pour la lumière et la profondeur directionnelle.
- Les dégradés radiaux et coniques sont utiles pour des spots, des anneaux et des roues chromatiques.
- Ajustez la position des arrêts pour des transitions plus nettes ou plus douces.