Générateur de dégradé CSS
Générez rapidement du code CSS pour vos dégradés linéaires ou radiaux avec un choix personnalisé de couleurs et d'angles.
Exécuter l’outil
Ce générateur produit le code CSS pour vos arrière-plans en dégradé linéaire ou radial. L'outil accepte trois paramètres textuels facultatifs : le type de dégradé, l'orientation souhaitée et la liste des teintes séparées par des virgules. Par défaut, la configuration initiale génère un dégradé linéaire allant vers la droite avec deux teintes d'exemple. Lorsque vous indiquez une structure linéaire, la direction saisie est directement intégrée dans la propriété CSS produite. Pour toute autre valeur textuelle renseignée dans le champ du type, l'outil bascule automatiquement sur un dégradé radial adoptant une forme circulaire. La chaîne des couleurs est découpée à chaque virgule, chaque teinte est nettoyée de ses espaces superflus, puis les valeurs sont réassemblées proprement. Le code CSS généré est immédiatement affiché dans l'espace de sortie, prêt à être copié dans votre feuille de style. Vous pouvez personnaliser librement les nuances hexadécimales, les formats RVB ou les angles d'inclinaison.
Mode d’emploi
- Saisissez le type de dégradé souhaité, linéaire ou radial, dans le premier champ.
- Indiquez l'orientation ou l'angle voulu pour la transition des couleurs.
- Renseignez vos teintes séparées par des virgules dans le champ prévu à cet effet.
- Lancez la génération pour afficher la déclaration CSS prête à l'emploi.
Exemples
- Dégradé linéaire horizontal : avec le type « linear », l'orientation « to right » et les couleurs « #ff7e5f, #feb47b », le générateur renvoie la propriété correspondante.
- Dégradé radial circulaire : en renseignant « radial » pour le type et les couleurs « #4facfe, #00f2fe », l'outil produit un dégradé radial circulaire centré.
FAQ
Comment choisir entre un dégradé linéaire et un dégradé radial ?
Indiquez la mention exacte « linear » dans le type pour obtenir une transition orientée. Toute autre valeur textuelle produit un dégradé radial circulaire.
Quels formats de couleur sont acceptés dans la liste ?
Vous pouvez saisir des codes hexadécimaux, des noms de couleurs CSS ou des valeurs rgb. Séparez simplement chaque valeur par une virgule.
Que se passe-t-il si des espaces sont présents autour des virgules ?
Le générateur supprime automatiquement les espaces superflus avant et après chaque couleur pour former une chaîne CSS propre.