Générateur de Dégradés CSS : Créez des Dégradés Linéaires, Radiaux et Coniques Visuellement
Créez de beaux dégradés CSS sans écrire de code. Choisissez Linear, Radial ou Conic, déplacez les couleurs, réglez l'angle, copiez un CSS propre. 8 modèles, générateur aléatoire et export PNG. Gratuit, dans votre navigateur.
1. Pourquoi les dégradés rendent les interfaces plus soignées
Une couleur plate est sûre ; un dégradé ajoute profondeur, direction et ambiance en une seule propriété. Boutons, sections hero, en-têtes de cartes et écrans de chargement gagnent en vie avec un dégradé choisi — utilisé depuis CSS3, car léger et universel.
La partie difficile, c'est le design : des couleurs harmonieuses, l'angle, et choisir entre linéaire, radial ou conique. Un générateur visuel supprime les essais-erreurs du CSS écrit à la main et affiche le résultat en direct.
2. Créer un dégradé pas à pas
Partez de zéro, d'un modèle, ou laissez le générateur aléatoire vous inspirer. L'aperçu se met à jour à chaque changement :
- Ouvrez le générateur et choisissez le type : Linear, Radial ou Conic.
- Cliquez sur une couleur pour la changer, glissez les étapes, utilisez Add Stop / Remove pour gérer le nombre de couleurs.
- Réglez l'Angle (135° par défaut) en Linear, ou choisissez un Radial Position (centre, coins, bords) en Radial.
- Parcourez les modèles (Sunset, Ocean, Violet, Peach, Forest, Night, Candy, Aurora) ou pressez Random.
- Passez à l'onglet Code, appuyez sur Copy CSS et collez dans votre feuille de style. Download PNG exporte en image.
3. Modèles et bouton aléatoire : des raccourcis de design
Trouver deux couleurs harmonieuses est la compétence la plus dure. Les huit modèles sont des combinaisons éprouvées : utilisez-les tels quels ou comme palette de départ.
- Sunset : orange chaud vers vert, parfait pour la cuisine ou le voyage.
- Ocean et Night : bleus froids, idéaux pour les interfaces pro ou tech.
- Candy et Aurora : combos saturés et ludiques pour pages d'atterrissage et illustrations.
Random n'est pas un jouet : pressez-le plusieurs fois et affinez dès qu'une combinaison vous plaît. Vous obtiendrez souvent un dégradé jamais choisi sur une roue chromatique.
4. FAQ
Quelle différence entre linéaire, radial et conique ?
Linéaire : mélange en ligne droite selon un angle. Radial : s'étend depuis un centre en cercles. Conique : balaie autour du centre comme une horloge, idéal pour boutons brillants ou roues colorées.
Puis-je utiliser plus de deux couleurs ?
Oui. Add Stop insère une étape n'importe où, chacune déplaçable et recolorable. Trois ou quatre étapes suffisent pour la plupart des designs riches.
Le CSS copié fonctionne-t-il partout ?
Oui. Les dégradés linéaires, radiaux et coniques sont du CSS standard pris en charge partout. Le code produit est propre, sans dépendance, à coller dans n'importe quel projet.