Générateur de dégradé CSS
Créez des dégradés CSS époustouflants avec aperçu en temps réel et code à 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 douces 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 en forme de cercle ou d'ellipse
Comment utiliser
- Choisissez entre le type linéaire ou radial
- Sélectionnez la direction (linéaire) ou la forme (radial)
- 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 lors de l'édition
- Arrêts de couleur multiples : ajoutez jusqu'à 10 couleurs dans un seul dégradé
- Dégradés prédéfinis : commencez avec de belles combinaisons de dégradés
- Couleurs aléatoires : générez des combinaisons de couleurs aléatoires pour l'inspiration
- Copier le code CSS : copie en un clic du code du dégradé généré
- Linéaire et radial : support de tous les types de dégradés CSS