Générateur de dégradé CSS

Créer des dégradés CSS linéaires et radiaux visuellement avec plusieurs arrêts de couleur

Qu'est-ce que c'est et comment ça marche ?

Un générateur de dégradés vous laisse construire des dégradés CSS visuellement — en choisissant les couleurs, en positionnant les arrêts et en choisissant la direction — puis vous donne le CSS exact à coller dans votre feuille de styles. Un dégradé est un fondu doux entre deux couleurs ou plus, et CSS le produit sans aucune image, il reste donc net à toute taille et n'ajoute aucun poids de téléchargement. Les deux types principaux sont le linéaire, qui fond le long d'une ligne droite à l'angle choisi, et le radial, qui fond vers l'extérieur depuis un point central en cercle ou ellipse.

Écrire le CSS d'un dégradé à la main est fastidieux car la syntaxe entasse direction, plusieurs arrêts de couleur et leurs positions sur une ligne, et une petite erreur produit un bord net ou le mauvais angle. Le construire visuellement et lire le code généré supprime cette friction : vous voyez le résultat en ajustant chaque arrêt de couleur, puis copiez une valeur dont vous savez qu'elle marche. Cet outil génère du CSS basé sur les standards dans votre navigateur, prêt pour fonds, boutons, superpositions et en-têtes.

Cas d'usage

• Concevoir un fond d'en-tête : construisez un dégradé linéaire à plusieurs arrêts pour un en-tête de page et copiez le CSS directement dans votre feuille de styles.
• Styliser boutons ou cartes : créez un dégradé subtil à deux couleurs pour donner de la profondeur à un élément plat.
• Faire une superposition d'image : générez un dégradé qui s'estompe vers le transparent pour que le texte reste lisible sur une photo.

Questions fréquentes

Quelle différence entre un dégradé linéaire et radial ?

Un dégradé linéaire fond les couleurs le long d'une ligne droite dans une direction ou un angle que vous définissez, bon pour les fonds et barres. Un dégradé radial fond vers l'extérieur depuis un point central en cercle ou ellipse, utile pour spots, lueurs et reflets arrondis.

Que sont les arrêts de couleur ?

Les arrêts de couleur sont les points le long du dégradé où une couleur précise se situe, avec une position (comme 0%, 50%, 100%). Ajouter des arrêts crée des fondus multicolores, et déplacer la position d'un arrêt contrôle où une couleur cède la place à la suivante.

Les dégradés CSS fonctionnent-ils partout ?

Oui, les dégradés linéaires et radiaux sont largement supportés par les navigateurs modernes, et comme c'est du CSS pur il n'y a aucune image à charger. Pour de très vieux navigateurs, une couleur de fond unie est un repli sûr derrière le dégradé.

Comment faire qu'un dégradé s'estompe vers le transparent ?

Utilisez une couleur avec une valeur alpha (comme un rgba ou un hex à 8 chiffres se terminant par 00) comme arrêt. Fondre d'une couleur pleine vers sa version totalement transparente est la façon standard de créer des superpositions lisibles sur des images.

Couleur

Générateur de palette · Vérificateur de contraste · Mélangeur de couleurs · Trouveur de nom de couleur