Les trois types de dégradé CSS
En CSS, un dégradé est une image de fond calculée par le navigateur : il s'écrit dans background-image, sans fichier à télécharger, et s'adapte à la taille de l'élément. La norme CSS Images du W3C en définit trois formes.
| Fonction | Les couleurs se suivent | Réglage |
|---|---|---|
linear-gradient | Le long d'une ligne droite | Angle |
radial-gradient | Du centre vers les bords | Cercle ou ellipse |
conic-gradient | Autour du centre | Angle de départ |
La syntaxe, arrêt par arrêt
Un dégradé se décrit par une liste d'arrêts de couleur : chaque couleur, suivie de sa position en pour cent sur la longueur du dégradé. Entre deux arrêts, le navigateur fait le fondu ; avant le premier et après le dernier, la couleur reste unie.
linear-gradient(angle, couleur position, …)radial-gradient(forme, couleur position, …)conic-gradient(from angle, couleur position, …)Pour un dégradé linéaire, 0° pointe vers le haut et l'angle tourne dans le sens des aiguilles d'une montre : 90° va de gauche à droite, 180° de haut en bas. Sans angle, le dégradé va de haut en bas. Pour un dégradé radial, le générateur place le centre au milieu de l'élément et laisse la taille par défaut, qui étend le dégradé jusqu'au coin le plus éloigné.
Trois exemples
linear-gradient(90deg, #ff6a13 0%, #ffd166 100%), précédé de background-color: #ff6a13; en couleur de repli : c'est le réglage par défaut de l'outil.
radial-gradient(circle, #ffffff 0%, #0055a4 70%) : le blanc s'estompe jusqu'à 70 % du rayon, puis le bleu reste uni jusqu'aux bords.
conic-gradient(from 330deg, #ff0000 0%, #ffff00 50%, #ff0000 100%) : la même couleur au premier et au dernier arrêt évite la ligne de rupture du dégradé conique. Un angle de −30° s'écrit 330°, la même direction.
Bien utiliser un dégradé
- Gardez une couleur de repli dans
background-color: si le dégradé n'est pas dessiné, le texte garde un fond proche. - Vérifiez le contraste du texte sur la couleur la plus claire et sur la plus foncée du dégradé : un texte lisible d'un côté peut ne plus l'être de l'autre.
- Pour une coupure nette, donnez la même position à deux arrêts consécutifs (50 % et 50 %) : on obtient deux aplats séparés par une ligne franche.
- Entre deux couleurs opposées sur le cercle chromatique, comme le bleu et l'orange, le milieu du fondu tire vers le gris. Ajoutez un arrêt intermédiaire plus vif au milieu pour l'éviter.
Le piège de l'angle
En géométrie, on compte l'angle à partir de l'horizontale, vers la droite. En CSS, 0° pointe vers le haut : le dégradé part du bas et monte. Pour aller de gauche à droite, il faut 90deg, ou le mot-clé to right.
Questions fréquentes
Comment faire un dégradé en CSS ?
Avec la propriété background-image et une fonction de dégradé : linear-gradient(90deg, #ff6a13 0%, #ffd166 100%) passe de l'orange au jaune, de gauche à droite. Chaque couleur peut être suivie de sa position en pour cent.
Quelle différence entre background et background-image pour un dégradé ?
Les deux fonctionnent. background-image ne touche qu'à l'image de fond, alors que le raccourci background remet aussi à zéro la couleur, la position et la répétition du fond. Le générateur écrit background-color (une couleur de repli) puis background-image.
Combien de couleurs peut avoir un dégradé ?
Autant que nécessaire : la norme CSS n'impose pas de limite. Le générateur en propose jusqu'à 8, ce qui suffit pour un arc-en-ciel ; au-delà, écrivez le code à la main en ajoutant des arrêts.
Comment faire une transition nette entre deux couleurs ?
Donnez la même position à deux arrêts consécutifs : linear-gradient(90deg, #ff6a13 50%, #ffd166 50%) coupe le fond en deux moitiés, sans fondu. C'est ainsi qu'on dessine des rayures.
Pourquoi une couleur de repli ?
Si un logiciel qui affiche la page ne sait pas dessiner le dégradé, il ignore la ligne background-image et garde la couleur de fond : le texte posé dessus reste sur un fond proche de celui prévu.
Une erreur ? Signalez-la, nous la corrigeons.