Générateur de Dégradés CSS
Mélangez jusqu'à 8 points de couleur en dégradés linéaires, radiaux ou coniques : glissez, affinez et copiez un code prêt pour la production.
Comment utiliser le générateur de dégradés
- Choisissez un type de dégradé : linéaire, radial ou conique.
- Cliquez sur la barre de dégradé pour ajouter un point de couleur ; faites glisser les points le long de la barre pour les repositionner.
- Sélectionnez un point pour modifier sa couleur, son opacité et sa position exacte (jusqu'à 8 points).
- Ajustez l'angle (linéaire/conique), la forme (radial) ou le point central jusqu'au résultat souhaité.
- Copiez la déclaration background en CSS, ou passez à l'onglet Tailwind pour une classe utilitaire.
À propos de ce générateur de dégradés
Les dégradés CSS sont des images générées par le navigateur : linear-gradient peint le long d'une ligne droite, radial-gradient rayonne depuis un point central et conic-gradient balaie autour d'un centre comme une roue chromatique. Chacun accepte deux points de couleur ou plus avec des positions optionnelles. Les écrire à la main — surtout avec de nombreux points ou de la transparence rgba — est lent et source d'erreurs.
Ce générateur rend votre dégradé en direct pendant que vous déplacez les points le long de la barre, tournez l'angle ou déplacez le point central. Partez de l'un des 10 préréglages soignés (coucher de soleil, océan, bonbon, arc-en-ciel…) et personnalisez-le. La sortie est une seule déclaration background qui fonctionne dans tous les navigateurs modernes ; l'onglet Tailwind enveloppe le même dégradé dans la syntaxe à valeur arbitraire pour les flux utility-first.
FAQ Dégradés
Combien de points de couleur puis-je ajouter ?
Jusqu'à 8 points. Cliquez n'importe où sur la barre de dégradé pour insérer un nouveau point à cette position : sa couleur est automatiquement interpolée depuis ses voisins. Glissez les points pour les repositionner, sélectionnez-en un pour modifier sa couleur et son opacité, et supprimez-le avec le bouton « Supprimer le point » (un minimum de 2 points est conservé).
Quelle est la différence entre dégradés linéaires, radiaux et coniques ?
Les dégradés linéaires font transitionner les couleurs le long d'une ligne droite selon un angle donné. Les dégradés radiaux s'étendent vers l'extérieur depuis un point central en cercle ou en ellipse. Les dégradés coniques font tourner les couleurs autour d'un point central (comme un camembert ou une roue chromatique) et acceptent un angle de départ « from ».
Comment faire un dégradé avec de la transparence ?
Sélectionnez n'importe quel point de couleur et baissez son curseur d'opacité. Le générateur émet des couleurs rgba() pour ce point, vous pouvez donc fondre vers le transparent ou mélanger le dégradé au-dessus d'une image ou couleur d'arrière-plan en dessous.
Comment inverser la direction des couleurs ?
Cliquez sur le bouton « Inverser » : il reflète chaque position de point (0 % devient 100 %, etc.), retournant le dégradé sans changer l'angle. Vous pouvez aussi tourner le curseur d'angle de 180° pour les dégradés linéaires.
Puis-je utiliser cela comme background-image plutôt que background ?
Oui. La valeur générée (linear-gradient(...), radial-gradient(...) ou conic-gradient(...)) est une