Générateur de dégradé CSS
Créez de superbes dégradés CSS avec aperçu en temps réel et code prêt à copier-coller
Type de dégradé
Aperçu en direct
Arrêts de couleur
Couleur 1
0%
Couleur 2
100%
Glissez les couleurs ou ajustez les positions pour créer votre dégradé parfait
CSS généré
background: linear-gradient(to right, #667eea 0%, #764ba2 100%);.gradient {
background: linear-gradient(to right, #667eea 0%, #764ba2 100%);
}Dégradés prédéfinis
Qu'est-ce qu'un dégradé CSS ?
Les dégradés CSS sont des transitions lisses entre deux ou plusieurs couleurs. Ils peuvent être utilisés comme arrière-plans, superpositions ou éléments décoratifs. Notre générateur de dégradé facilite la création de dégradés linéaires et radiaux avec un éditeur visuel. Choisissez simplement les couleurs, ajustez les positions et copiez le code CSS généré directement dans votre feuille de style.
Types de dégradés CSS
- Dégradé linéaire: Crée un dégradé le long d'une ligne droite dans n'importe quelle direction (horizontale, verticale ou diagonale)
- Dégradé radial: Crée un dégradé rayonnant à partir d'un point central dans une forme circulaire ou elliptique
Comment utiliser
- Choisissez entre un dégradé linéaire ou radial
- Sélectionnez la direction (linéaire) ou la forme (radiale)
- Ajoutez, supprimez ou ajustez les arrêts de couleur
- Affinez la position de chaque couleur le long du dégradé
- Copiez le code CSS généré et collez-le dans votre feuille de style
Caractéristiques principales
- Aperçu en direct : voyez votre dégradé en temps réel à mesure que vous l'éditez
- Arrêts de couleur multiples : ajoutez jusqu'à 10 couleurs dans un seul dégradé
- Dégradés prédéfinis : commencez avec de magnifiques combinaisons de dégradés pré-créées
- Randomiser les couleurs : générez des combinaisons de couleurs aléatoires pour l'inspiration
- Copier le code CSS : copie en un clic du code de dégradé généré
- Linéaire et radial : support pour tous les types de dégradés CSS