Générateur de dégradés CSS — linéaire, radial et conique, aperçu en direct

Utilisez une fonction de dégradé comme image de fond : background: linear-gradient(90deg, #4f46e5 0%, #06b6d4 100%); Le premier argument est la direction (un angle, ou des mots-clés comme to right), suivi des arrêts de couleur, chacun composé d’une couleur et d’une position facultative. radial-gradient() se diffuse depuis un point et conic-gradient() tourne autour d’un point. Les dégradés sont des images : ils vont dans background ou background-image, pas dans background-color.

C’est la direction vers laquelle va le dégradé, mesurée dans le sens horaire depuis le haut : 0deg va du bas vers le haut, 90deg de gauche à droite, 180deg du haut vers le bas (la valeur par défaut si vous l’omettez) et 270deg de droite à gauche. C’est différent de la convention mathématique où 0 degré pointe vers la droite, ce qui explique pourquoi les dégradés issus de certains outils de design ressortent pivotés.

Un dégradé linéaire change de couleur le long d’une ligne droite. Un dégradé radial change de couleur vers l’extérieur à partir d’un point central, en cercle ou en ellipse, et son mot-clé de taille (closest-side, farthest-corner, etc.) détermine où tombe le dernier arrêt. Un dégradé conique change de couleur autour d’un point central, comme les aiguilles d’une horloge : c’est l’outil idéal pour les camemberts, les roues chromatiques et les indicateurs de chargement.

Placez deux arrêts à la même position pour obtenir un bord net au lieu d’une transition, puis répétez le motif. Par exemple, repeating-linear-gradient(45deg, #244b3f 0 10px, #e8f0ec 10px 20px) crée des rayures diagonales de 10px de large. Le préréglage Rayures fait la même chose avec des pourcentages. Dans un dégradé répété, la distance entre le premier et le dernier arrêt correspond à la longueur d’une répétition.

Pour des dégradés linéaires simples à deux ou trois couleurs, utilisez les utilitaires de Tailwind, comme bg-gradient-to-r from-indigo-600 to-cyan-500 (bg-linear-to-r dans Tailwind v4). Pour tout le reste — angles, dégradés radiaux ou coniques, arrêts avec opacité —, utilisez une valeur arbitraire : la classe générée ici, comme bg-[linear-gradient(135deg,#4f46e5_0%,#06b6d4_55%)], où les tirets bas remplacent les espaces. Les très longues valeurs arbitraires sont difficiles à lire : envisagez de les déplacer dans la configuration de votre thème.

Les navigateurs interpolent les dégradés en sRGB par défaut, et la ligne droite entre deux couleurs saturées presque opposées (bleu vers jaune, rouge vers vert) passe par un gris désaturé. Ajoutez un arrêt intermédiaire avec une couleur intermédiaire franche ou, dans les navigateurs récents, interpolez dans un espace perceptuel : linear-gradient(90deg in oklch, blue, yellow). Les effets de bandes dans les dégradés longs et subtils sont un autre problème, dû à la couleur 8 bits ; une légère texture de bruit par-dessus le dégradé les masque.