Qu'est-ce que Dégradé vers CSS ?

Un constructeur visuel de dégradés qui vous permet de concevoir des dégradés linéaires, radiaux et coniques avec plusieurs points de couleur et de copier le code CSS. Ajustez les angles, positions et couleurs avec un aperçu en direct.

Construisez des dégradés linéaires, radiaux ou coniques en glissant des points de couleur sur une barre et en regardant l'aperçu se redessiner en temps réel. Collez un dégradé CSS existant pour le modifier sur place, choisissez un preset (Sunset, Aurora, Rainbow), ajustez l'angle, puis copiez la syntaxe. La sortie est du CSS pur, sans préfixe ni JavaScript.

Comment utiliser

1. Choisissez un type de dégradé (linéaire, radial ou conique) et définissez la direction ou l'angle.
2. Ajoutez, supprimez ou ajustez les points de couleur en cliquant sur la barre de dégradé ou en utilisant les sélecteurs de couleur.
3. Copiez le code CSS généré pour l'utiliser directement dans votre feuille de style.

Quand l'utiliser

• Dessiner le fond d'une section hero avec un contrôle précis des points et de l'angle.
• Mettre à jour un dégradé déjà présent dans la feuille de style : coller, éditer visuellement, recopier.
• Générer un dégradé conique pour fonds en camembert ou loaders arc-en-ciel.

Résultat

Essayez un dégradé coucher de soleil : linear-gradient(135deg, #ff6b35 0%, #f72585 50%, #7209b7 100%) — idéal pour l'arrière-plan d'une section hero.

FAQ

Quelle différence entre linéaire, radial et conique ?

Linéaire fait courir les couleurs selon un angle droit. Radial part d'un centre en anneaux concentriques. Conique tourne autour d'un centre, comme un camembert. Les trois acceptent la même syntaxe de points.

Comment importer un dégradé déjà dans mon CSS ?

Collez la déclaration complète dans le champ Import, par exemple background: linear-gradient(135deg, #ff6b35, #f72585);, puis cliquez sur Import. L'éditeur visuel charge l'angle, les points et le type détectés.

Pourquoi des bandes apparaissent sur certains écrans ?

Le banding survient quand deux points éloignés en teinte rencontrent un écran 8 bits. Ajoutez un point intermédiaire ou réduisez la plage angulaire. Les navigateurs en rendu HDR montrent bien moins de bandes.

Puis-je utiliser la sortie comme background-image ?

Oui. La chaîne copiée sert pour background, background-image ou toute propriété CSS qui accepte une image : border-image, mask, et même fill de SVG dans les navigateurs récents.

La sortie ajoute-t-elle des préfixes -webkit- ?

Non. Les dégradés linéaires, radiaux et coniques fonctionnent sans préfixe dans tous les navigateurs evergreen depuis 2017. Ajouter des préfixes aujourd'hui ne fait qu'alourdir la feuille de style.

Outils similaires