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

Créez visuellement des dégradés linéaires, radiaux et coniques et copiez un CSS propre. Superposez plusieurs calques, ajoutez des arrêts de couleur avec transparence et faites glisser directement sur l’aperçu pour changer la direction.

Dégradé CSS de noir à turquoise

Chaque dégradé peut comporter plusieurs calques, et chaque calque a son propre type, son angle et ses couleurs. Le résultat est du CSS pur sans préfixes navigateur, prêt à coller dans votre projet. Le lien de la page enregistre votre dégradé : vous pouvez le partager ou y revenir plus tard.

Comment utiliser le générateur de dégradés

Choisissez un type de dégradé
Sélectionnez linéaire, radial ou conique pour chaque calque. Le linéaire fond les couleurs le long d’une ligne droite, le radial les diffuse depuis un point central, le conique les fait tourner autour du centre.

Réglez les couleurs et les calques
Cliquez sur la barre de couleur pour ajouter un arrêt, faites-le glisser pour changer sa position et choisissez n’importe quelle couleur avec transparence. Le bouton d’ajout de calque place un autre dégradé par-dessus.

Prévisualisez votre design
Testez le dégradé sur six formes : plein écran, carré, rectangle horizontal et vertical, cercle et étoile. Vous pouvez aussi changer l’arrière-plan derrière la forme.

Ajouter une couche
background: linear-gradient(90deg, #000000 0%, #40e0d0 100%);