Générateur de dégradé CSS
Créez facilement des dégradés CSS linéaires et radiaux personnalisés à partir de deux couleurs et d'un angle d'orientation.
Exécuter l’outil
Ce générateur produit le code CSS pour des dégradés linéaires ou radiaux à partir de deux teintes et d'un angle d'orientation. Par défaut, l'outil combine un rouge corail (#ff6b6b) et un bleu turquoise (#4ecdc4) selon une inclinaison de 45 degrés. Vous pouvez personnaliser ces valeurs avec des codes hexadécimaux, des notations RVB ou des noms de couleurs standard. Pour un dégradé linéaire, l'angle spécifié est automatiquement converti en entier puis normalisé sur 360 degrés. Si une valeur textuelle non numérique est saisie dans ce champ, l'angle par défaut de 45 degrés s'applique automatiquement. Lorsque vous choisissez le type radial, le système génère un dégradé circulaire harmonieux partant du centre. Tout autre type non reconnu bascule vers le format linéaire tout en conservant le libellé saisi. Le code CSS généré est immédiatement prêt à être copié dans vos feuilles de style pour habiller des boutons, des cartes ou des arrière-plans.
Mode d’emploi
- Sélectionnez ou saisissez la première couleur dans le champ dédié.
- Indiquez la deuxième couleur sous forme de code hexadécimal, RVB ou nom CSS valide.
- Définissez l'angle d'inclinaison en degrés pour orienter la transition.
- Précisez le type de dégradé souhaité, tel que linéaire ou radial.
- Lancez la génération pour afficher la règle CSS correspondante.
Exemples
- Création d'un dégradé linéaire classique : avec la première couleur #ff6b6b, la deuxième couleur #4ecdc4 et un angle de 90 degrés, l'outil produit la déclaration CSS linear-gradient(90deg, #ff6b6b, #4ecdc4).
- Création d'un dégradé radial : en renseignant #2c3e50 et #3498db avec le type radial, vous obtenez la règle CSS radial-gradient(circle, #2c3e50, #3498db).
FAQ
Quels formats de couleur sont acceptés dans les champs ?
Vous pouvez utiliser des codes hexadécimaux (par exemple #ff6b6b), des notations rgb() ou rgba(), ainsi que les noms de couleurs CSS standards. Les valeurs sont directement insérées dans la règle CSS produite.
Que se passe-t-il si un angle supérieur à 360 degrés est saisi ?
La valeur est automatiquement convertie en nombre entier et réduite modulo 360. Par exemple, un angle de 450 degrés devient 90 degrés.
Comment fonctionne le choix entre un dégradé linéaire et radial ?
La valeur radiale génère une transition circulaire partant du centre. Si la valeur linéaire ou un autre texte est renseigné, le générateur produit un dégradé linéaire orienté selon l'angle choisi.