Points clés
- 01Les trois types de dégradés CSS — linéaire, radial et conique — sont pris en charge avec un aperçu en direct.
- 02Ajoutez jusqu'à six points de couleur, chacun avec une position et une couleur indépendantes.
- 03Le résultat est une déclaration de fond complète prête à coller dans n'importe quelle feuille de style.
- 04Pas d'inscription, pas d'installation et rien n'est téléchargé — tout s'exécute dans votre navigateur.
Pourquoi utiliser un générateur de dégradés visuel ?
Écrire des dégradés CSS à la main devient rapidement fastidieux. La syntaxe est lisible une fois que vous la connaissez, mais choisir les positions exactes des points et les couleurs sans aperçu visuel transforme une simple décision de conception en essais-erreurs dans les DevTools. Un générateur vous permet de voir le résultat en temps réel et d'exporter du code propre dès qu'il vous plaît.
Cet outil prend en charge les trois types de dégradés modernes. Le dégradé linéaire est le mélange directionnel classique que vous utiliserez pour les arrière-plans de héros et les boutons. Le dégradé radial s'étend à partir d'un point — idéal pour les effets de projecteur et les vignetages. Le dégradé conique balaie autour d'un centre, ce qui en fait le choix par défaut pour les segments de graphiques circulaires, les roues de couleurs et les indicateurs de chargement. Commencez par l'un des présets intégrés (Lime Swiss, Sunset, Sky, Aurora) ou concevez à partir de zéro.
Comment générer un dégradé CSS
L'ensemble du processus prend moins d'une minute.
- 01
Choisissez un type de dégradé
Sélectionnez Linéaire, Radial ou Conique dans le sélecteur de type. Pour le dégradé linéaire, définissez également l'angle. L'aperçu se met à jour immédiatement.
- 02
Ajoutez et positionnez les points de couleur
Cliquez sur Ajouter un point pour insérer un nouveau point, puis déplacez son curseur ou tapez un pourcentage pour le positionner. Jusqu'à six points sont pris en charge — les points se réorganisent automatiquement par position.
- 03
Choisissez la couleur de chaque point
Cliquez sur l'échantillon de couleur pour ouvrir le sélecteur de couleur système, ou tapez directement une valeur hexadécimale. Les formats RGB et hexadécimal fonctionnent tous les deux.
- 04
Aperçu en temps réel
Le panneau d'aperçu affiche votre dégradé en utilisant le moteur de dégradé natif du navigateur, de sorte que le résultat correspond exactement à ce que le CSS produira en production.
- 05
Copiez la déclaration CSS
Cliquez sur Copier pour récupérer la déclaration complète background: linear-gradient(...). Collez-la dans une feuille de style, un composant stylisé ou une valeur arbitraire Tailwind comme bg-[<value>].
Cas d'usage courants des dégradés
Chaque type de dégradé excelle dans un scénario différent.
- 01Arrière-plans de section héros — dégradé linéaire à 135° pour un balayage diagonal moderne.
- 02États de survol des boutons — dégradé linéaire subtil à deux points pour la profondeur.
- 03Projecteur radial ou vignettage — dégradé radial du foncé au transparent sur une superposition d'image.
- 04Graphiques circulaires et anneaux de progression — dégradé conique avec arrêts nets.
- 05Aperçus de sélecteur de roue de couleurs — dégradé conique plein spectre.
- 06Dégradés de texte — appliquez le dégradé à l'arrière-plan, puis utilisez background-clip: text.
S'exécute entièrement dans votre navigateur
Le générateur de dégradés s'exécute 100 % côté client — aucune donnée n'est envoyée à un serveur. L'aperçu est rendu par le moteur CSS natif de votre navigateur, ce qui signifie que ce que vous voyez correspond à ce que le navigateur de tout visiteur affichera avec le même CSS.
Une note pratique : les clients de messagerie ont toujours un support inégal pour les dégradés CSS. Si vous collez du CSS généré dans un modèle d'email HTML, ajoutez une couleur de fond solide avant la déclaration de dégradé afin que les destinataires sur les anciens clients voient quelque chose de raisonnable.
FAQ du générateur de dégradés CSS
Quelle est la différence entre les dégradés linéaires, radiaux et coniques ?
Les dégradés linéaires font la transition le long d'une ligne droite à un angle donné. Les dégradés radiaux s'étendent à partir d'un point central — utiles pour les surbrillances et les effets de spot. Les dégradés coniques balaient autour d'un centre comme des aiguilles d'horloge — idéal pour les segments de graphiques circulaires et les roues de couleurs.
Puis-je utiliser ceci pour les projets Tailwind CSS ?
Oui. Copiez la valeur générée et utilisez-la comme valeur arbitraire Tailwind, par exemple : bg-[linear-gradient(135deg,#ff6b6b,#4ecdc4)]. Tailwind l'inclura dans votre feuille de style de sortie.
L'aperçu correspond-il exactement à ce que je verrai sur le site en direct ?
Oui — l'aperçu est rendu par le même moteur de dégradé du navigateur qui affichera votre CSS en direct, de sorte que le résultat est précis au pixel.
Puis-je utiliser des dégradés CSS dans les modèles d'email ?
La plupart des clients de messagerie ne prennent pas en charge les dégradés CSS de manière fiable. Ajoutez toujours une couleur de fond solide avant votre déclaration de dégradé comme solution de secours.
Y a-t-il une limite au nombre de points de couleur ?
Le générateur prend en charge jusqu'à six points. Pour la plupart des conceptions, deux à quatre suffisent ; plus de six tend à réduire la clarté plutôt que d'ajouter de la richesse.