Deux couleurs, quatre directions, du code prêt à copier
Le générateur de dégradés affiche un aperçu du dégradé entre deux couleurs et écrit le CSS pour vous. Choisissez diagonal, horizontal, vertical ou radial, puis copiez la déclaration linear-gradient ou radial-gradient, ou les classes utilitaires Tailwind équivalentes. Vos deux couleurs sont stockées dans l'URL, donc un dégradé se partage par simple lien, et un ensemble de paires prédéfinies issues des couleurs Material Design est accessible en un clic.
Comment l'utiliser
- Définissez les couleurs De et Vers avec les sélecteurs ou en saisissant des codes hex.
- Choisissez une direction sous l'aperçu : diagonale (135°), horizontale, verticale ou radiale.
- Copiez le CSS ou les classes Tailwind avec les boutons de copie.
- Appuyez sur Partager pour copier un lien, ou ouvrez la page dédiée du dégradé pour les détails des deux couleurs.
Sortie CSS ou Tailwind
L'onglet CSS fournit une simple déclaration background: linear-gradient(135deg, #A, #B); qui fonctionne dans tous les navigateurs modernes sans préfixe. L'onglet Tailwind fournit les utilitaires équivalents bg-gradient-to-r from-[#A] to-[#B] avec des valeurs arbitraires, donc les couleurs n'ont pas besoin d'exister dans votre config Tailwind. Avec Tailwind v4, l'utilitaire de direction s'écrit bg-linear-to-r ; les classes from/to restent inchangées.
Exemples
- Fond de section héro : un indigo foncé vers un indigo légèrement plus clair, en diagonale, garde le texte blanc lisible tout en ajoutant de la profondeur.
- Survol de bouton : un dégradé horizontal entre deux nuances de votre couleur principale paraît plus vivant qu'un simple changement de couleur unie.
- Avatar par défaut : un dégradé radial d'une couleur de marque vers sa nuance plus foncée semble intentionnel avec des initiales par-dessus.
Conseils
- Les dégradés entre deux nuances d'une même teinte rendent presque toujours bien. Choisissez-les dans une même famille de la palette Material.
- Des teintes opposées peuvent produire un gris boueux au milieu ; dans ce cas, rapprochez l'une des couleurs d'une teinte voisine.
- Vérifiez le texte sur un dégradé au point le plus clair avec le vérificateur de contraste, pas sur la moyenne.
- Tirez les deux couleurs d'une photo avec l'extracteur de couleurs d'image pour un dégradé assorti à vos visuels.