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 Chromoforge.
- 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 : linéaire, radial et conique. Choisissez votre type, definissez les couleurs de depart et d'arrivée, 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 défini par un angle (0deg = bas vers haut, 90deg = gauche a droite). Idéal pour les fonds de section et les boutons. - Radial (
radial-gradient) : rayonne depuis un point central vers l'extérieur. 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 décoratifs.
Vous pouvez ajouter autant de color stops que nécessaire, définir leur position en pourcentage ou en px/rem, et obtenir instantanément le code CSS copier-coller. L'aperçu 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é linéaire 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 éclairage et le rend plus "cliquable".
- Texte colore : avec
background-clip: text, un dégradé peut être applique directement sur le texte pour un effet visuel marquant. - Séparateurs de section : des dégradés de couleur vers transparent créent 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 éviter, interpolez en oklch ou ajoutez un color stop intermédiaire 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'élément. Alternativement, animez des custom properties CSS et générez le dégradé depuis les variables — les navigateurs modernes supportent cela.
Quelle est la différence entre un dégradé "hard stop" et un dégradé progressif ?
Un "hard stop" place deux color stops a la même position, créant 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.