Générateur de Dégradés CSS
Créez des dégradés CSS linéaires ou radiaux avec un aperçu en direct et un code prêt à copier.
Réponse rapide: Générateur de Dégradés CSS : créez des dégradés CSS linéaires ou radiaux avec aperçu en direct et code prêt à copier. Fonctionne entièrement dans votre navigateur, gratuitement et sans inscription.
Dernière mise à jour
Bon à savoir
The mechanics that trip people up are direction and stop placement. In CSS a linear gradient angle is measured clockwise from the top: 0deg points up, 90deg points right, 180deg down. Radial gradients instead radiate from a center point outward, which makes them ideal for spotlights, soft vignettes and button glows where linear direction would look wrong.
Watch for the gray dead zone. Interpolating between two saturated but complementary hues — say blue to orange — routes the midpoint through a muddy gray in the default sRGB space. Nudging the stops or picking colors closer on the wheel keeps the blend lively; browsers that support in oklch interpolation produce noticeably cleaner transitions for far-apart hues.
For a smooth backdrop, keep contrast low and the angle shallow so banding stays invisible on wide screens; for a punchy accent, push the stops apart and raise the angle. Gradients are also purely decorative to assistive tech, so never rely on one to convey meaning — any text on top still has to clear the WCAG contrast threshold against the darkest part of the blend.
Pair this with a palette workflow: derive harmonious endpoints in the Color Palette Generator, then drop them in here to turn a two-color scheme into a background.
Questions fréquentes
- Le générateur de dégradés est-il gratuit?
- Oui — gratuit sans inscription.
- Linéal ou radial?
- Les deux — alternez entre dégradés linéaires et radiaux avec le sélecteur de type.
- Puis-je ajouter plus de deux stops de couleur?
- La version actuelle supporte deux stops; le CSS résultant est facile à étendre manuellement si vous en avez besoin.
- La sortie fonctionne-t-elle partout?
- Oui — la syntaxe est du CSS pur, supporté par tous les navigateurs depuis 2014.
- Mes couleurs sont-elles téléchargées?
- Non — l'aperçu et la génération de CSS se font entièrement dans votre navigateur.