Image
100% dans votre navigateur
Générateur de Dégradé CSS — Dégradés Linéaires et Radiaux
Créez de beaux dégradés CSS visuellement. Dégradés linéaires, radiaux et coniques avec points de couleur multiples, angle réglable, aperçu en direct et code à copier.
90deg
Points de couleur
Code CSS
Générateur de Dégradé CSS — Concevez des Dégradés Visuellement
Créez de superbes dégradés CSS avec un éditeur visuel en direct. Ajoutez autant de points de couleur que vous voulez, choisissez des dégradés linéaires, radiaux ou coniques, ajustez l’angle et copiez le code CSS prêt à l’emploi. Parfait pour les arrière-plans, boutons, cartes et sections héros.
Types de dégradé
- Linéaire : les couleurs se fondent le long d’une ligne droite à n’importe quel angle (0–360°)
- Radial : les couleurs rayonnent depuis le centre, en cercle ou en ellipse
- Conique : les couleurs tournent autour d’un point central (idéal pour les roues chromatiques et effets camembert)
Fonctionnalités
- Points de couleur illimités : ajoutez ou supprimez des couleurs librement
- Contrôle de position : faites glisser chaque couleur de 0% à 100%
- Contrôle d’angle : faites pivoter précisément les dégradés linéaires et coniques
- Aperçu en direct : voyez votre dégradé se mettre à jour instantanément
- Bouton aléatoire : générez une nouvelle combinaison de couleurs pour l’inspiration
- Sortie CSS propre : copiez une seule ligne prête à coller
Comment utiliser le CSS
Copiez le code généré et appliquez-le à n’importe quel élément. Par exemple :
.hero {
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}Conseils
- Deux ou trois couleurs sont souvent plus élégantes que beaucoup
- Pour des arrière-plans subtils, utilisez des couleurs proches sur la roue chromatique
- Pour des effets vifs, utilisez des couleurs complémentaires
- Les dégradés coniques sont parfaits pour les spinners de chargement et sélecteurs de couleur
Confidentialité
Cet outil fonctionne entièrement dans votre navigateur. Rien n’est envoyé ni stocké.