Le terme officiellement recommandé en français pour désigner un gradient CSS est « dégradé » — c'est la traduction retenue par France Terme, la base terminologique de la Commission d'enrichissement de la langue française, alors que l'anglicisme « gradient » reste très courant dans les échanges entre développeurs.
linear-gradient et radial-gradient
linear-gradient(45deg, red, blue) étire la couleur le long d'une ligne droite selon un angle donné — le type le plus utilisé pour les fonds de boutons, bannières et cartes. radial-gradient(circle, yellow, orange) répartit la couleur en cercles ou ellipses concentriques depuis un point donné, idéal pour simuler une tache de lumière.
conic-gradient, le petit dernier de la spécification
conic-gradient(red, yellow, green, blue, red) fait tourner la couleur autour d'un point central, comme l'aiguille d'une horloge. Standardisé nettement après les deux autres types, c'est le seul capable de dessiner un diagramme circulaire ou un indicateur de progression en anneau sans image ni SVG supplémentaire.
Color stops et dégradés répétés
Chaque couleur peut être ancrée à une position en pourcentage, comme dans linear-gradient(red 0%, yellow 50%, blue 100%), ce qui permet de contrôler la brusquerie de la transition. Les fonctions repeating-linear-gradient() et repeating-radial-gradient() répètent automatiquement cette même séquence de stops, créant des motifs rayés ou en damier avec une seule ligne de CSS.
Pourquoi c'est utile
- Choisir et copier du code CSS de dégradé prêt à l'emploi sans ajuster manuellement les angles et les couleurs.
- Comprendre quel type de dégradé convient à un effet visuel donné.
- Ajuster précisément les positions des color stops pour la transition souhaitée.
Du flat design au retour du dégradé
Après des années de design plat porté par iOS 7 en 2013, le dégradé est revenu en force dans le design d'interface : la refonte d'Instagram en 2016 a remplacé son icône d'appareil photo par un logo en dégradé orange-violet, un choix qui a ensuite influencé de nombreuses identités de startups et de pages d'accueil à la fin des années 2010, en rupture nette avec l'esthétique unie qui dominait juste avant.