Composer un dégradé et récupérer le code
Choisissez vos couleurs, l'orientation et le type de dégradé, puis copiez la propriété CSS générée. Elle se colle telle quelle dans votre feuille de style, sans image ni dépendance.
Un dégradé CSS est calculé par le navigateur. Il ne pèse rien, reste net à toutes les tailles d'écran et à toutes les densités de pixels, et s'adapte automatiquement à la taille de son conteneur — trois avantages qu'une image de fond n'aura jamais.
Linéaire, radial, conique
Le dégradé linéaire progresse en ligne droite selon un angle que vous définissez. C'est le plus courant : fonds de section, bandeaux, boutons.
Le dégradé radial rayonne depuis un point. Il sert surtout à créer une zone de lumière ou à concentrer l'attention au centre d'un bloc.
Le dégradé conique tourne autour d'un point comme les quartiers d'un camembert. Plus rare, il permet des effets de roue chromatique ou de progression circulaire sans image.
Comprendre l'angle
L'angle indique la direction vers laquelle le dégradé progresse, et non son point de départ. Une valeur de zéro degré va du bas vers le haut, 90 degrés de la gauche vers la droite, 180 degrés du haut vers le bas.
Vous pouvez aussi employer les mots-clés directionnels, plus lisibles à la relecture, du type « vers la droite » ou « vers le coin inférieur droit ». Ces derniers ont un avantage : l'orientation reste correcte quel que soit le rapport largeur/hauteur du conteneur.
Le défaut que tout le monde rencontre : la zone grise
Un dégradé entre deux couleurs vives franchement opposées — un bleu et un jaune, par exemple — traverse presque toujours une zone terne et sale au milieu.
La cause est technique : l'interpolation par défaut passe par des valeurs intermédiaires qui correspondent à des teintes désaturées. Ce n'est pas un bug, c'est la conséquence du calcul.
Deux remèdes. Le premier, simple et efficace : ajouter une couleur intermédiaire que vous choisissez vous-même, pour forcer le passage par une teinte agréable. Le second : rester entre des couleurs proches sur le cercle chromatique, ce qui donne des dégradés plus sobres et presque toujours plus élégants.
Du texte sur un dégradé
C'est le piège le plus fréquent. Le contraste change d'un bout à l'autre du dégradé : un texte parfaitement lisible sur la partie sombre devient illisible sur la partie claire.
Vérifiez le contraste aux deux extrémités, pas seulement là où vous avez placé votre exemple. Si les deux ne passent pas, superposez un voile semi-transparent uni entre l'image ou le dégradé et le texte : c'est la solution la plus robuste.
Une remarque sur le style
Les dégradés saturés à trois couleurs sur toute la largeur d'une page datent instantanément un site. Ils reviennent par vagues et repartent aussi vite.
Les usages qui vieillissent bien sont discrets : une transition entre deux nuances très proches pour donner de la profondeur à un fond, un léger éclaircissement au survol d'un bouton, un voile dégradé du bas d'une image pour asseoir un titre. Le lecteur ne doit pas remarquer le dégradé, seulement trouver la page agréable.