Générateur de dégradés CSS
Créez des dégradés CSS linéaires, radiaux et coniques depuis une palette.
Ce que couvre cette page
Cette page explique le flux de travail et renvoie directement vers la section correspondante de l’outil principal Chromaforge.
- Générez des palettes depuis une couleur de base.
- Vérifiez le contraste avant de publier du texte UI.
- Exportez CSS, Tailwind, SCSS, JSON, SVG et PNG.
- Fonctionne localement dans le navigateur.
Comment ca fonctionne
Le générateur de dégradés produit du code CSS pret a l'emploi pour trois types de dégradés natifs : lineaire, radial et conique. Choisissez votre type, definissez les couleurs de depart et d'arrivee, puis ajustez l'angle ou le point de centre.
Pour chaque type de dégradé :
- Lin?aire (
linear-gradient) : transitions le long d'un axe defini par un angle (0deg = bas vers haut, 90deg = gauche a droite). Ideal pour les fonds de section et les boutons. - Radial (
radial-gradient) : rayonne depuis un point central vers l'exterieur. Parfait pour les effets lumineux, les badges et les icônes. - Conique (
conic-gradient) : tourne autour d'un point comme un cercle chromatique. Utile pour les graphiques en camembert CSS et les effets decoratifs.
Vous pouvez ajouter autant de color stops que nécessaire, definir leur position en pourcentage ou en px/rem, et obtenir instantanement le code CSS copier-coller. L'apercu temps réel montre le rendu exact dans le navigateur.
Exemples pratiques
Les dégradés CSS remplacent avantageusement les images dans de nombreux contextes :
- Hero section : un dégradé lineaire subtil sur le fond de votre section hero cree de la profondeur sans alourdir le chargement.
- Boutons avec effet 3D : un dégradé du haut vers le bas sur un bouton simule un eclairage et le rend plus "cliquable".
- Texte colore : avec
background-clip: text, un dégradé peut etre applique directement sur le texte pour un effet visuel marquant. - Separateurs de section : des dégradés de couleur vers transparent creent des transitions douces entre sections sans ligne rigide.
- Indicateurs de progression : un dégradé conique avec un color stop fixe simule un cercle de progression pur CSS.
FAQ — Dégradés CSS
Comment cr?er un dégradé avec transparence ?
Utilisez une couleur avec canal alpha comme color stop : rgba(0, 0, 0, 0) ou la syntaxe moderne oklch(0 0 0 / 0). Attention aux "bandes grises" qui apparaissent dans les dégradés vers transparent : elles sont dues a une interpolation dans l'espace sRGB. Pour les eviter, interpolez en oklch ou ajoutez un color stop intermediaire a 50%.
Puis-je animer un dégradé CSS ?
Les dégradés CSS ne sont pas directement animables via les transitions CSS standard. La technique la plus performante est d'animer la propriété background-position sur un dégradé plus large que l'element. Alternativement, animez des custom properties CSS et générez le dégradé depuis les variables — les navigateurs modernes supportent cela.
Quelle est la difference entre un dégradé "hard stop" et un dégradé progressif ?
Un "hard stop" place deux color stops a la même position, creant une transition abrupte sans melange : linear-gradient(red 50%, blue 50%). Utile pour les rayures et les designs geometriques. Un dégradé progressif normal melange les couleurs sur toute la distance entre les stops.
Le code généré fonctionne-t-il dans tous les navigateurs ?
Les dégradés linéaires et radiaux sont supportés par tous les navigateurs modernes depuis des années. Le dégradé conique (conic-gradient) nécessite Chrome 69+, Firefox 83+, Safari 12.1+. Pour les navigateurs très anciens, prévoyez une couleur de repli (background-color) avant la propriété dégradé.