Générateur de Dégradé CSS Gratuit en Ligne
Créez de beaux dégradés CSS linéaires, radiaux et coniques avec aperçu en direct. Copiez le code CSS instantanément.
Who uses the Générateur de Dégradé CSS?
- Développeurs frontend créant des dégradés de fond pour des sections hero et des composants UI.
- Designers prototypant des identités visuelles basées sur des dégradés et des transitions de couleurs de marque.
- Apprenants CSS comprenant la syntaxe des dégradés via un constructeur visuel et interactif.
How the Générateur de Dégradé CSS works
Sélectionnez le type de dégradé : Linear, Radial ou Conic.
Cliquez sur le carré de couleur d'un point d'arrêt pour changer sa couleur via le sélecteur de couleur.
Utilisez le curseur à côté de chaque point pour ajuster sa position, ou cliquez sur « + Add color stop » pour en ajouter un nouveau.
Ajustez l'angle (linear/conic), puis copiez le code CSS depuis le panneau de sortie.
Tips & tricks
- Il faut au moins 2 points de couleur — le bouton de suppression (×) n'apparaît qu'à partir de 3 points ou plus.
- Les dégradés radiaux masquent le contrôle d'angle puisqu'un dégradé circulaire centré n'a pas de direction à régler.
- Les points sont toujours affichés dans l'ordre de position dans le CSS de sortie, quel que soit l'ordre dans lequel vous les avez ajoutés.
- Le sélecteur de couleur ne prend pas en charge le canal alpha/transparence — ajoutez rgba() manuellement dans le CSS copié si vous avez besoin d'un point transparent.
Frequently Asked Questions
Quelle est la syntaxe CSS pour un dégradé linéaire ?
background: linear-gradient(direction, couleur1, couleur2). Exemple : background: linear-gradient(135deg, #667eea 0%, #764ba2 100%). La direction peut être un angle (45deg) ou un mot-clé (to right, to bottom right).
Comment créer un dégradé radial ?
background: radial-gradient(forme taille at position, couleur1, couleur2). Exemple : background: radial-gradient(circle at center, #f6d365 0%, #fda085 100%). Cet outil génère un dégradé radial circulaire centré.
Puis-je ajouter plus de deux points de couleur ?
Oui. Cliquez sur « + Add color stop » autant de fois que nécessaire. Chaque point a son propre sélecteur de couleur et curseur de position, et les points sont automatiquement triés par position dans le CSS de sortie.
Comment créer un dégradé transparent ?
Utilisez rgba() ou hex avec alpha pour des points transparents. Exemple : linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%) crée un fondu vers le noir — souvent utilisé en superposition sur des images hero pour la lisibilité du texte. Le sélecteur de couleur de cet outil n'inclut pas de canal alpha, modifiez donc le CSS copié manuellement pour la transparence.
Le dégradé CSS fonctionne-t-il dans tous les navigateurs ?
Les dégradés CSS sont pris en charge dans tous les navigateurs modernes (Chrome, Firefox, Safari, Edge, Opera). Un préfixe fournisseur (-webkit-) n'est pas strictement requis pour les navigateurs modernes, bien que cet outil inclue une ligne préfixée -webkit- dans sa sortie pour la couverture des navigateurs plus anciens.
Is my data safe when using the Générateur de Dégradé CSS?
Completely safe. The Générateur de Dégradé CSS processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the Générateur de Dégradé CSS output in commercial projects?
Yes. The Générateur de Dégradé CSS is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the Générateur de Dégradé CSS follow official standards?
Yes. The Générateur de Dégradé CSS is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.