Les meilleurs outils de dégradés CSS

Les trois types de dégradés

Le CSS propose trois fonctions de dégradé, toutes utilisables dans background :

Linéaire

background: linear-gradient(135deg, #3b82f6, #1d4ed8);

Radial

background: radial-gradient(circle, #3b82f6, #1d4ed8);

Conique

background: conic-gradient(from 0deg, #3b82f6, #9333ea, #3b82f6);

Le dégradé de texte

Un grand classique : appliquer un dégradé au texte grâce au masque de fond.

.gradient-text {
  background: linear-gradient(135deg, #3b82f6, #9333ea);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Animer un dégradé

En agrandissant la taille du fond et en animant sa position, on obtient un dégradé en mouvement très tendance :

.animated {
  background: linear-gradient(270deg, #3b82f6, #9333ea, #ec4899);
  background-size: 600% 600%;
  animation: shift 8s ease infinite;
}
@keyframes shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

Bonnes pratiques

• Limitez-vous à deux ou trois couleurs harmonieuses.
• Utilisez l’espace OKLCH pour des transitions sans zones ternes.
• Vérifiez le contraste du texte posé sur un dégradé.

Créez votre dégradé

Notre générateur de gradient couvre les trois types avec un aperçu en direct, et notre convertisseur de couleurs vous aide à trouver les bonnes valeurs OKLCH.

Découvrir nos outils CSS gratuits