Générateur de dégradés CSS

Concevez un dégradé de couleurs pour le fond de votre site et copiez le CSS. Faites glisser les points sur la barre, cliquez dessus pour ajouter des couleurs et choisissez entre dégradé linéaire, radial ou conique.

Dégradé

Linéaire Radial Conique

Angle:

Forme

Centre

Répéter (repeating-gradient)

Exemples :

Couleurs

Chaque couleur accepte HEX, rgba(), hsl(), oklch() ou un nom CSS ; utilisez transparent ou un alpha inférieur à 1 pour fondre avec le fond.

Code CSS

Types de dégradés en CSS

linear-gradient() fond les couleurs le long d'une ligne selon l'angle choisi (0deg de bas en haut, 90deg de gauche à droite). radial-gradient() les répartit en cercles ou en ellipses depuis un centre, et conic-gradient() les fait tourner autour d'un point, comme une roue chromatique ou un diagramme circulaire.

Les versions repeating-linear-gradient(), repeating-radial-gradient() et repeating-conic-gradient() répètent le motif : avec des points proches (par exemple à 0 % et à 10 %), elles permettent de créer des rayures et des damiers sans images.

Comment utiliser le code

Les dégradés sont des images pour le CSS : ils s'appliquent avec background ou background-image, jamais avec background-color. Tous les navigateurs actuels les prennent en charge sans préfixe -webkit-.

Pour un texte en dégradé, combinez le fond avec background-clip: text et color: transparent. Et si vous placez du texte par-dessus, vérifiez son contraste avec la couleur la plus claire du dégradé.