Vue d'ensemble
Cet outil transforme un choix de couleurs en dégradé CSS exploitable sans tâtonner à la main. Passez du mode linéaire au mode radial, ajustez l’angle ou le point focal, et voyez chaque modification apparaître immédiatement dans l’aperçu. Il est utile dès qu’un fond doit avoir une vraie intention visuelle : sections hero, boutons, cartes, superpositions, badges et accents d’interface. Le résultat est un CSS propre, prêt à coller dans une feuille de style, un composant ou un système de variables.
Cas d'usage
- Fond de heroCréez un dégradé fort pour la partie haute de la page, au service du titre et de la marque.
- Bouton principalGénérez un dégradé à deux couleurs pour les appels à l’action et les éléments interactifs.
- Halo de carteAjoutez une lueur radiale douce derrière des cartes tarifaires, des blocs fonctionnalités ou des panneaux.
- Test de paletteComparez plusieurs combinaisons avant de les intégrer à une charte ou à un design system.
- Superposition sur imageConstruisez une couche de dégradé qui renforce le contraste du texte sur bannières et visuels.
Comment ca marche
- 1
Choisissez les couleurs du dégradé.
- 2
Sélectionnez le mode linéaire ou radial.
- 3
Réglez l’angle, la position ou l’étendue.
- 4
Vérifiez l’aperçu en direct.
- 5
Copiez le code CSS dans votre projet.
Exemples
Fond diagonal de marque
Entree: #0f172a → #2563eb à 135°
Sortie: background: linear-gradient(135deg, #0f172a, #2563eb);
Un dégradé diagonal du sombre vers le lumineux pour les sections principales.
Lueur radiale douce
Entree: #fff7ed → #fdba74 centré
Sortie: background: radial-gradient(circle at center, #fff7ed 0%, #fdba74 100%);
Une mise en lumière chaude pour cartes et panneaux.
En-tête à trois stops
Entree: #111827 → #4f46e5 → #c084fc
Sortie: background: linear-gradient(120deg, #111827 0%, #4f46e5 52%, #c084fc 100%);
Une transition plus riche pour les en-têtes et les blocs hero.
FAQ
Puis-je contrôler l’endroit où commence le dégradé ?
Oui. En mode linéaire, vous définissez l’angle ; en mode radial, vous pouvez aussi déplacer le centre et la zone de diffusion.
Pourquoi l’aperçu peut-il différer dans mon projet ?
La taille de l’élément, la couleur de fond derrière lui et le rendu du navigateur peuvent légèrement modifier le résultat perçu.
Combien de points de couleur faut-il utiliser ?
Deux suffisent pour un fond simple ; trois ou plus donnent des transitions plus riches. Trop de stops peuvent toutefois alourdir le rendu.
Puis-je coller le résultat dans du CSS classique et des styles de composants ?
Oui. La déclaration générée peut être utilisée dans une feuille de style, un bloc inline ou la définition d’un composant.