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

Créez des dégradés CSS linéaires, radiaux ou coniques avec jusqu’à six arrêts de couleur et copiez le code.

Gratuit Sans inscription Fonctionne dans votre navigateur

Type de dégradé

Angle 90°

Arrêts de couleur

CSS

Le premier arrêt est ajouté comme couleur unie de secours.

Besoin de couleurs assorties ? Utilisez le Générateur de palettes de couleurs.

Utilisations courantes

Créez l’arrière-plan d’une bannière ou d’un bouton
Testez des associations de couleurs avant de les intégrer à une maquette
Obtenez le code d’un dégradé sans l’écrire à la main

Comment ça marche

Comment créer un dégradé CSS

Choisissez le type de dégradé

Choisissez linéaire, radial ou conique, et réglez l’angle des dégradés linéaires et coniques.

Définissez les arrêts de couleur

Choisissez jusqu’à six couleurs et faites glisser le curseur de position de chacune. L’aperçu se met à jour en direct.

Copiez le CSS

Copiez la règle background. Elle inclut une couleur unie de secours pour les navigateurs très anciens.

FAQ

Bon à savoir

Comment utiliser le générateur de dégradés CSS ?

1. Choisissez le type de dégradé: Choisissez linéaire, radial ou conique, et réglez l’angle des dégradés linéaires et coniques. 2. Définissez les arrêts de couleur: Choisissez jusqu’à six couleurs et faites glisser le curseur de position de chacune. L’aperçu se met à jour en direct. 3. Copiez le CSS: Copiez la règle background. Elle inclut une couleur unie de secours pour les navigateurs très anciens.

Quels navigateurs prennent en charge ces dégradés ?

Les dégradés linéaires, radiaux et coniques fonctionnent dans toutes les versions actuelles de Chrome, Edge, Firefox et Safari.

Pourquoi y a-t-il une deuxième ligne background ?

La première ligne est une couleur unie que les navigateurs sans prise en charge des dégradés utilisent à la place.

Puis-je utiliser le code à des fins commerciales ?

Oui. Vous pouvez utiliser le CSS généré dans n’importe quel projet.

Poursuivre

Plus de design et de couleur

Voir tout