Habiller un fond d'interface
Déplacez les points et l'angle pour essayer les couleurs en direct, puis copiez la CSS background une fois le rendu satisfaisant.
Chargement…
Guide
Le générateur de dégradés CSS sert à composer visuellement des dégradés linéaires, radiaux et coniques, tout en produisant la CSS à copier. Les points de couleur se déplacent le long de la barre, s'ajoutent d'un clic sur une zone vide et changent de couleur ; deux au minimum sont conservés. Le dégradé linéaire règle une direction de 0 à 359°, le radial propose circle/ellipse avec neuf positions de centre, et le conique accepte un angle de départ et une position de centre. La page offre en plus une « inspiration aléatoire » fondée sur le module aléatoire Web Crypto, qui génère des schémas analogues, complémentaires ou triadiques.
Mis à jour le 2026-09-102 min read
Le générateur de dégradés CSS sert à composer visuellement des dégradés linéaires, radiaux et coniques, tout en produisant la CSS à copier. Les points de couleur se déplacent le long de la barre, s'ajoutent d'un clic sur une zone vide et changent de couleur ; deux au minimum sont conservés. Le dégradé linéaire règle une direction de 0 à 359°, le radial propose circle/ellipse avec neuf positions de centre, et le conique accepte un angle de départ et une position de centre. La page offre en plus une « inspiration aléatoire » fondée sur le module aléatoire Web Crypto, qui génère des schémas analogues, complémentaires ou triadiques.
-webkit-, et la première ligne fournit un aplat de secours.| Entrée | Sortie | Notes |
|---|---|---|
| 135°, deux points de couleur | linear-gradient(...) |
la CSS est générée en parallèle |
| un dégradé conique centré en bas à droite | un fond d'écran PNG | le canvas dessine à la taille préréglée choisie |
Déplacez les points et l'angle pour essayer les couleurs en direct, puis copiez la CSS background une fois le rendu satisfaisant.
Exportez le même dégradé en PNG à une taille 4K pour ordinateur ou portrait pour téléphone.
Non. Elle tire au hasard une teinte de base et un schéma analogue, complémentaire ou triadique, puis randomise la saturation, la luminosité et l'angle du dégradé linéaire.
La première ligne est un aplat de secours ; les variantes linéaire et radiale ajoutent l'écriture WebKit historique, et la dernière ligne correspond au dégradé standard moderne.
Les couleurs, la CSS et le PNG sont calculés et générés localement dans le navigateur, sans requête vers un service distant de couleurs ou d'images.
Mis à jour le 2026-09-10
Édition visuelle de dégradés linéaires, radiaux et coniques, copie du code CSS ou export PNG en fond d’écran
Cet outil n’est pas entièrement traduit ; certains contenus utilisent la langue source ou une langue de repli.
Faites glisser un point d’arrêt pour le repositionner ; cliquez dans une zone vide pour en ajouter un
background: #6366f1; /* couleur de repli pour anciens navigateurs */ background: -webkit-linear-gradient(315deg, #6366f1 0%, #ec4899 100%); background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);