Trois types de dégradés CSS et quand les utiliser
Les dégradés linéaires (`linear-gradient()`) font la transition des couleurs le long d'une ligne droite à n'importe quel angle — le choix le plus courant pour les arrière-plans, boutons et remplissages de texte. Les dégradés radiaux (`radial-gradient()`) émanent d'un point central vers l'extérieur, produisant des étendues de couleur circulaires ou elliptiques idéales pour les effets de projecteur et les arrière-plans hero. Les dégradés coniques (`conic-gradient()`) font tourner les couleurs autour d'un point central, permettant des graphiques circulaires et des roues chromatiques entièrement en CSS.
Les trois sont du CSS pur — pas d'images, pas de SVG, pas de JavaScript. Ils s'adaptent parfaitement à n'importe quelle résolution et se chargent instantanément.
Points de couleur, positions et transparence
Un dégradé est défini par au moins deux points de couleur. Chaque point spécifie une couleur et une position optionnelle (0 %–100 %). Vous pouvez utiliser n'importe quelle couleur CSS valide — hex, rgb(), hsl(), oklch() ou couleurs nommées. La transparence alpha (rgba, hsla ou hex avec alpha) fonctionne parfaitement.
Les points de couleur nets — deux points à la même position — créent des bords de couleur tranchants sans mélange. Cette technique permet des motifs à damier et des arrière-plans rayés entièrement en CSS.
Support navigateur et préfixes vendeurs
Tous les navigateurs modernes (Chrome, Firefox, Safari, Edge) prennent en charge `linear-gradient()`, `radial-gradient()` et `conic-gradient()` sans préfixe. Les dégradés coniques sont entièrement supportés depuis 2020. Si vous avez besoin du support IE11, vous aurez besoin d'une couleur d'arrière-plan solide de repli.