Générateur de dégradé CSS

Créez visuellement un dégradé CSS et copiez le code linear-gradient ou radial-gradient pour vos fonds, boutons et accents d’interface.

⌘ S’exécute dans le navigateur ◴ Aucune donnée stockée ⌁ Gratuit

Intention de recherche

Créez rapidement des dégradés CSS pour UI et landing pages

Générez du code de dégradé CSS pour arrière-plans, boutons et sections, puis copiez-le directement dans votre feuille de style.

Ajustez type linéaire/radial, arrêts de couleur, angle et direction, puis comparez l’aperçu en direct avant d’exporter.

Copiez la valeur `linear-gradient(...)` ou `radial-gradient(...)` générée et collez-la directement dans `background`/`background-image`.

Hero, surbrillance de cartes, fonds de boutons, bannières et sections de marque où la transition de couleur améliore la hiérarchie visuelle.

Équilibrez couleur de marque avec points de couleur et direction (ex : `to right`, `90deg`, `to bottom right`) selon la lisibilité et le ton.

Après collage, vérifiez le contraste du texte, la cohérence de la couleur de marque et le rendu sur les navigateurs principaux.

L’outil priorise la génération et la copie rapides de CSS. Validez ensuite l’accessibilité du contraste et l’apparence multi-navigateurs.

Arrêts de couleur Type

Dégradé CSS généré

1 Choisissez un dégradé linéaire ou radial et ajustez l’angle.
2 Ajoutez des arrêts de couleur ou modifiez leurs couleurs et positions tout en vérifiant l’aperçu.
3 Copiez le code de dégradé CSS généré dans votre feuille de style.

Quels dégradés puis-je créer ?

Vous pouvez créer des valeurs linear-gradient et radial-gradient ; les dégradés linéaires disposent aussi d’un angle réglable.

Puis-je ajouter ou modifier des arrêts de couleur ?

Oui. Ajustez les couleurs et les positions, puis ajoutez ou supprimez des arrêts pour mettre immédiatement à jour l’aperçu et le CSS.

Comment utiliser le CSS généré ?

Le résultat s’affiche sous forme de propriété background, et le bouton de copie permet de le coller dans votre feuille de style.