Pourquoi les dégradés CSS sont encore sous-utilisés
Introduits dans CSS3 (2009), les trois types résolvent des problèmes visuels différents :
linear-gradient()— transitions directionnelles le long d'une ligne droite.radial-gradient()— transitions rayonnant depuis un point central.conic-gradient()— transitions balayant autour d'un point central.
Les trois partagent la même syntaxe de color stops mais diffèrent en géométrie.
linear-gradient : le fondement
Un dégradé linéaire fait la transition des couleurs le long d'une ligne droite.
Syntaxe
L'argument direction contrôle l'angle de la ligne :
| Valeur | Angle | Direction |
|---|---|---|
| to bottom | 180deg | Haut vers Bas (défaut) |
| to right | 90deg | Gauche vers Droite |
| to bottom right | 135deg | Haut-gauche vers Bas-droite |
| 45deg | 45deg | Bas-gauche vers Haut-droite |
| 0.25turn | 90deg | Gauche vers Droite (turn) |
Color stops : positions, longueurs et transitions nettes
Les transitions nettes se créent en plaçant deux stops à la même position.
red 20% 40% est équivalent à red 20%, red 40%.
Le color hint : contrôle du point médian
Le color hint déplace le point médian d'interpolation entre deux stops.
repeating-linear-gradient
repeating-linear-gradient() répète le pattern à l'infini.
radial-gradient : circulaire et elliptique
Un dégradé radial rayonne depuis un point central, créant par défaut une ellipse.
Syntaxe
Le premier argument contrôle forme et taille. at <position> déplace le centre.
Forme et mots-clés de dimensionnement
Le mot-clé de taille définit où se termine le dégradé :
farthest-corner(défaut) — jusqu'au coin le plus éloigné.closest-corner— jusqu'au coin le plus proche.farthest-side— jusqu'au côté le plus éloigné.closest-side— jusqu'au côté le plus proche.
Positionner le centre
at accepte n'importe quelle valeur de position CSS valide.
conic-gradient : le nouveau venu
conic-gradient() a été le dernier type à obtenir le support des navigateurs. Ses transitions balaient autour d'un point central.
Syntaxe
<code>from <angle></code> fait pivoter l'angle de départ. <code>at <position></code> déplace le centre.
À quoi servent vraiment les conic gradients
- Camemberts — sans JavaScript.
- Roues chromatiques — de hsl(0deg) à hsl(360deg).
- Patterns angulaires — avec repeating-conic-gradient.
- Anneaux de progression — avec border-radius: 50%.
repeating-conic-gradient
repeating-conic-gradient() répète le pattern angulaire.
Patterns avancés
Techniques allant au-delà de l'utilisation standard.
Arrière-plans rayés
Dégradés hard-stop avec background-size pour des rayures évolutives.
Texte dégradé
background: dégradé, -webkit-background-clip: text, color: transparent.
Mesh gradients
Plusieurs radiaux superposés. Utilisez le PixCode Color Palette Generator.
Damier avec conic-gradient
repeating-conic-gradient(#000 0% 25%, transparent 0% 50%) avec background-size.
Comparaison directe
| Caractéristique | linear-gradient | radial-gradient | conic-gradient |
|---|---|---|---|
| Modèle de direction | Ligne droite | Radial depuis centre | Balayage angulaire |
| Variante repeating | repeating-linear-gradient | repeating-radial-gradient | repeating-conic-gradient |
| Color hint | Oui | Oui | Oui |
| Inset | Non | Non | Non |
| Cas d'usage | Arrière-plans, boutons | Projecteurs, lueurs | Camemberts, roues |
Considérations de performance
Certains patterns causent des repaints :
Dégradés statiques. Comme background-image. Repeating.
Animer les color stops. Grandes surfaces avec beaucoup de radiaux. Texte dégradé petit.
Ne jamais animer background directement. Pseudo-élément avec opacity ou transform.
Accessibilité et contraste
Le texte sur dégradés doit respecter WCAG AA à chaque point.
Tester au point le plus clair. Overlay : background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%).