Couleurs & design
Générateur de dégradé CSS
Composez votre dégradé à l'œil, copiez le CSS en un clic.
Un beau dégradé donne de la profondeur à un arrière-plan, un bouton ou une section d'accueil — encore faut-il trouver les bonnes couleurs et le bon angle. Cet éditeur vous laisse composer visuellement : ajoutez de deux à cinq arrêts de couleur, positionnez-les précisément, réglez l'angle du dégradé linéaire ou basculez en mode radial. L'aperçu occupe tout le cadre et se met à jour à chaque réglage, exactement comme le rendra votre navigateur. Quand le résultat vous plaît, un clic copie la déclaration CSS complète (background: linear-gradient(…)), prête à coller dans votre feuille de style, un composant ou un e-mail HTML. Aucune inscription, tout se passe dans votre navigateur.
Comment faire ?
- Choisissez le type de dégradé : linéaire ou radial.
- Ajoutez vos couleurs (2 à 5 arrêts) et positionnez-les.
- Réglez l'angle et affinez à l'œil grâce à l'aperçu plein cadre.
- Copiez le code CSS généré dans votre feuille de style.
Questions fréquentes
Dégradé linéaire ou radial : quelle différence ?
Le linéaire progresse le long d'une droite dont vous choisissez l'angle — idéal pour les arrière-plans et boutons. Le radial rayonne depuis le centre vers l'extérieur — parfait pour les effets de halo ou de projecteur.
Comment obtenir un dégradé subtil et élégant ?
Restez entre couleurs voisines sur le cercle chromatique et limitez l'écart de luminosité : un dégradé de deux teintes proches est presque toujours plus élégant qu'un arc-en-ciel. Un angle de 135° donne une diagonale naturelle.
Le code généré fonctionne-t-il partout ?
Oui : linear-gradient() et radial-gradient() sont pris en charge par tous les navigateurs actuels, sans préfixe. Seuls quelques clients e-mail anciens les ignorent — prévoyez alors une couleur de secours.