Générateur de dégradé CSS : à quoi ça sert
Écrire un dégradé à la main oblige à modifier le CSS, enregistrer et recharger jusqu’à ce que l’angle soit bon. Ce générateur offre un aperçu en direct : choisissez le type, l’angle et les arrêts de couleur, observez le résultat et copiez un CSS prêt pour la production, sans préfixe et compatible avec tous les navigateurs actuels.
Générateur de dégradé CSS : mode d’emploi
- Choisissez un dégradé linéaire ou radial.
- Réglez l’angle pour un dégradé linéaire.
- Ajoutez des arrêts de couleur et déplacez leur position.
- Copiez le CSS généré directement dans votre feuille de styles.
Questions fréquentes
Comment fonctionnent les angles de dégradé en CSS ?
0deg pointe vers le haut et les angles augmentent dans le sens des aiguilles d’une montre : 90deg va de gauche à droite et 180deg de haut en bas. Cela diffère de la convention mathématique et déroute souvent.
Pourquoi mon dégradé est-il terne au centre ?
Parce que l’interpolation en sRGB passe par un point intermédiaire désaturé, surtout entre couleurs complémentaires. Ajouter un arrêt intermédiaire, ou utiliser l’interpolation en oklch des navigateurs récents, corrige le problème.
Faut-il encore des préfixes navigateur ?
Non. linear-gradient et radial-gradient sans préfixe fonctionnent depuis des années dans tous les navigateurs actuels. Les préfixes ne font qu’alourdir le fichier.
Peut-on animer un dégradé ?
Pas directement par une transition, car background-image ne s’interpole pas. L’astuce habituelle consiste à animer background-position sur un dégradé surdimensionné, ou à utiliser des propriétés personnalisées déclarées avec @property.