Générateur de dégradés CSS
Dessinez un dégradé en déplaçant les arrêts de couleur, choisissez la façon dont les couleurs se mélangent et copiez un CSS propre – ou exportez-le en SVG ou PNG.
- Linéaire · radial · conique
- Mélange OKLab
- CSS + Tailwind
- SVG + PNG
La façon dont les couleurs sont calculées entre deux arrêts. OKLab évite la bande grise et terne que sRGB produit entre des couleurs opposées.
Arrêts de couleur
Exporter
SVG ne connaît pas les dégradés coniques. Utilisez l’export PNG pour un dégradé conique.
Modèles
Comment créer un dégradé CSS
Tout se met à jour en direct.
- 1
Définissez les couleurs
Cliquez sur la barre pour ajouter un arrêt, faites-le glisser pour le déplacer et modifiez chaque couleur en dessous. Ou partez d’un modèle.
- 2
Donnez-lui sa forme
Choisissez linéaire, radial ou conique, l’angle ou le centre, et la méthode de mélange.
- 3
Copiez ou exportez
Copiez le code CSS ou Tailwind, ou téléchargez le dégradé en SVG ou en PNG à la taille voulue.
Des dégradés sans milieu terne
Mélange moderne, code compatible.
Trois types de dégradés
Linéaire à n’importe quel angle, radial en cercle ou en ellipse, conique pour les balayages en camembert – chacun avec ses réglages de position.
Mélange perceptuel
Mélangez en OKLab ou OKLCH et la bande grise et terne que sRGB place entre des couleurs opposées disparaît.
Édition directe
Ajoutez des arrêts d’un clic, faites-les glisser, ajustez-les avec les flèches, supprimez-les d’un double-clic. Les couleurs peuvent être partiellement transparentes.
Du CSS pour tous les navigateurs
Utilisez la syntaxe moderne courte ou activez la compatibilité maximale : le même rendu écrit avec des arrêts supplémentaires, plus une couleur unie de repli.
Vectoriel et bitmap
SVG pour un agrandissement net dans les logiciels de création, PNG jusqu’à 8000 px pour les diapositives, fonds d’écran et e-mails.
Modèles et aléatoire
Dix-huit points de départ et un générateur aléatoire qui produit des duos et des trios harmonieux.
Lien à partager
Copiez un lien qui ouvre l’outil avec le même contenu. Les données se trouvent après le # de l’adresse, une partie que les navigateurs n’envoient pas aux serveurs.
Confidentiel par conception
Tout fonctionne dans votre navigateur. Ce que vous saisissez ou ouvrez n’est pas envoyé à un serveur.
Les dégradés CSS expliqués
Un dégradé CSS est une image générée par le navigateur : il ne coûte aucun téléchargement et reste net à toute taille. linear-gradient() mélange le long d’une ligne : 0deg pointe vers le haut, 90deg vers la droite, et les angles croissent dans le sens horaire. radial-gradient() se propage depuis un centre en cercle ou en ellipse, et conic-gradient() tourne autour du centre comme une aiguille d’horloge – la base des camemberts et des cercles chromatiques.
Chaque arrêt de couleur possède une couleur et une position. Entre deux arrêts, le navigateur interpole – traditionnellement en sRGB, canal par canal. Cela fonctionne pour des teintes voisines, mais entre des couleurs opposées comme le bleu et le jaune, le milieu vire au gris. Le CSS moderne permet de choisir l’espace : linear-gradient(in oklab, blue, yellow) mélange comme l’œil s’y attend, et in oklch parcourt le cercle des teintes pour des transitions vives, façon arc-en-ciel.
La syntaxe in oklab est prise en charge par tous les navigateurs actuels (Chrome 111, Safari 16.2, Firefox 127 et suivants). Pour les plus anciens, ce générateur peut écrire le même rendu sous forme de dégradé classique avec des arrêts intermédiaires. Deux conseils pratiques : placez une simple background-color avant le dégradé comme solution de repli, et donnez un léger angle ou un troisième arrêt aux grandes surfaces peu contrastées pour éviter un effet de bandes.
Les trois fonctions de dégradé
| Fonction | Mélange | Usage typique |
|---|---|---|
| linear-gradient() | Le long d’une droite inclinée | Arrière-plans, boutons, voiles, remplissages de texte |
| radial-gradient() | Du centre vers l’extérieur | Projecteurs, halos, vignettes |
| conic-gradient() | Autour d’un centre | Camemberts, cercles chromatiques, indicateurs de chargement |
| repeating-…() | Le même, en mosaïque | Rayures et motifs |
Conseils
- Trouvez les couleurs exactes de vos arrêts avec le Convertisseur de couleurs.
- Prenez un jeu de couleurs tout prêt dans la Collection de palettes ou créez-en un dans le Générateur de palettes.
- Un texte sur un dégradé doit rester lisible sur sa partie la plus claire comme la plus sombre – testez les deux avec le Vérificateur de contraste.
- Pour un fondu vers la transparence, utilisez la même couleur avec un alpha nul (par exemple rgb(6 182 212 / 0)) plutôt que le mot-clé « transparent », que d’anciens navigateurs mélangent en passant par le gris.
Questions fréquentes
Vous ne trouvez pas votre réponse ? Contactez-nous — nous répondons rapidement.
Comment créer un dégradé en CSS ?
Utilisez une fonction de dégradé comme image d’arrière-plan : background: linear-gradient(135deg, #06b6d4, #6366f1);. Ce générateur écrit le code pour vous, avec l’angle, les arrêts et la solution de repli.
Pourquoi mon dégradé paraît-il gris au milieu ?
Parce que les couleurs sont mélangées en sRGB, où les teintes opposées s’annulent. Choisissez le mélange OKLab – ou ajoutez un arrêt de couleur vive entre les deux – et la bande grise disparaît.
Quelle différence entre linéaire, radial et conique ?
Le linéaire change de couleur le long d’une ligne, le radial du centre vers l’extérieur, le conique autour du centre comme les aiguilles d’une horloge.
« in oklab » fonctionne-t-il dans tous les navigateurs ?
Dans toutes les versions récentes de Chrome, Edge, Safari et Firefox. Pour les navigateurs plus anciens, activez « Compatibilité maximale » : le même rendu est écrit en syntaxe classique.
Puis-je utiliser le dégradé comme image ?
Oui. Exportez-le en SVG, net à toute taille, ou en PNG aux dimensions voulues. Les dégradés coniques n’existent qu’en PNG, car SVG ne connaît pas le dégradé conique.
Mes données sont-elles envoyées à un serveur ?
Non. L’outil fonctionne entièrement dans votre navigateur. Votre saisie n’est ni envoyée, ni journalisée, ni stockée sur nos serveurs.
Plus d’outils gratuits pour développeurs
Encoder, formater, tester, convertir et générer – de petits outils qui fonctionnent dans votre navigateur et laissent vos données sur votre appareil.