Générateur de Dégradés CSS

En quoi consiste cet outil ?

Les dégradés CSS sont des images générées par le navigateur à partir d'une liste de couleurs, plutôt que des fichiers que vous téléversez — linear-gradient() fait transitionner les couleurs le long d'une ligne droite selon un angle donné, tandis que radial-gradient() les fait transitionner vers l'extérieur depuis un point central. Les deux acceptent deux points de couleur ou plus, chacun pouvant être ancré à une position dans le dégradé.

Écrits à la main, les dégradés sont faciles à rater subtilement : ordre des points, pourcentages manquants, ou une valeur d'angle dans la mauvaise direction (les angles CSS tournent dans le sens horaire à partir de 'to top', contrairement aux angles mathématiques). Cet outil met la syntaxe de côté — réglez les couleurs et les positions avec des sélecteurs et des curseurs, observez l'aperçu se mettre à jour en temps réel, et copiez le CSS résultant une fois satisfait du rendu.

Source : CSS Images Module Level 3, W3C — la spécification définissant la syntaxe de linear-gradient() et radial-gradient().

Pourquoi l'utiliser ?

• L'aperçu en direct se met à jour instantanément à chaque changement de couleur, de position ou d'angle — pas besoin de recharger la page pour voir le résultat.
• Basculez entre dégradé linéaire et radial en un clic ; le contrôle d'angle se masque automatiquement pour les dégradés radiaux, où il ne s'applique pas.
• Ajoutez ou supprimez des points de couleur (de 2 à 4) au lieu d'être limité à un dégradé fixe à deux couleurs.
• Chaque point a son propre curseur de position, donc les points n'ont pas besoin d'être espacés uniformément.
• Génère du CSS prêt à coller utilisant la syntaxe standard linear-gradient()/radial-gradient().
• Fonctionne entièrement dans votre navigateur — rien de ce que vous configurez n'est envoyé où que ce soit. Gratuit, sans inscription, fonctionne sur mobile.

Mode d'emploi

1. Choisissez Linéaire ou Radial comme type de dégradé.
2. Pour un dégradé linéaire, faites glisser le curseur d'angle — 90deg va de gauche à droite, 180deg va de haut en bas, et ainsi de suite.
3. Définissez la couleur et la position de chaque point ; le premier point est la couleur de départ du dégradé, le dernier est sa couleur de fin.
4. Cliquez sur '+ Ajouter un point' pour ajouter jusqu'à 4 points au total pour un dégradé multicolore, ou sur le bouton ✕ pour en retirer un (minimum de 2).
5. Copiez le CSS généré et collez-le dans une déclaration background ou background-image.

Exemple

Entrée

Linéaire · Angle : 90deg · Points : #f97316 à 0%, #ec4899 à 100%

Résultat

background: linear-gradient(90deg, #f97316 0%, #ec4899 100%);

Un dégradé orange vers rose de gauche à droite — un style courant pour les boutons, bannières et arrière-plans de sections hero.

Dégradés linéaires vs. radiaux

Un dégradé linéaire fait transitionner la couleur le long d'une ligne droite, contrôlée par un angle — utile pour les bannières, boutons et arrière-plans directionnels. Un dégradé radial fait transitionner la couleur vers l'extérieur depuis un point central en anneaux qui s'étendent, ce qui convient aux effets de projecteur, badges ou arrière-plans lumineux. Cet outil configure par défaut le dégradé radial comme un cercle centré dans le cadre, ce qui couvre le cas d'usage radial le plus courant ; CSS prend aussi en charge les formes d'ellipse et les positions décentrées si vous devez retoucher le résultat à la main.

Modèles courants de dégradés

• Accent de marque subtil : deux teintes proches (par exemple deux nuances de la même couleur) à un angle peu marqué pour un fond doux.
• Bouton CTA à fort contraste : deux couleurs saturées et complémentaires à 90deg ou 135deg pour un rendu audacieux et cliquable.
• Superposition sur une image : un dégradé de transparent vers une couleur pleine (réglez l'opacité via une couleur rgba dans le hexadécimal sous-jacent du sélecteur, ou ajustez après avoir copié) posé sur une background-image.
• Dégradé arc-en-ciel/de marque à plusieurs points : 3 à 4 points répartis sur toute la plage 0–100% pour des transitions plus douces et progressives qu'un dégradé à deux couleurs ne le permet.
• Projecteur radial : un point central lumineux près de 0% s'estompant vers un point de bord plus sombre près de 100%, utile pour les sections hero ou les mises en valeur de cartes.

À associer avec d'autres outils CSS

Les dégradés sont souvent combinés avec des coins arrondis et des ombres sur le même élément — une carte en dégradé avec une ombre douce et des coins arrondis est un motif d'interface courant. Générez chaque élément séparément et combinez les déclarations CSS sur l'élément.

→ Générateur de Box Shadow · Générateur de Border Radius · Sélecteur de couleur

Foire aux questions