Générateur de dégradés CSS : Guide complet des dégradés linéaires et radiaux

Les dégradés CSS sont l'un des outils visuels les plus puissants disponibles pour les designers web — ils créent des transitions fluides entre les couleurs sans aucun fichier image, se rendent à n'importe quelle résolution et s'animent avec les transitions CSS. Pourtant, beaucoup de designers n'utilisent que les bases : deux couleurs, une direction.

Ce guide couvre toute la gamme des capacités de dégradés CSS : les trois types, les stops de couleur avancés, la notation d'angle et les techniques créatives comme les mesh gradients, le texte dégradé et les arrière-plans rayés — plus les considérations de performance et les bonnes pratiques.

Vue d'ensemble des types de dégradés CSS

CSS fournit trois fonctions de dégradé. linear-gradient() crée une transition le long d'une ligne droite. radial-gradient() crée une transition qui rayonne vers l'extérieur depuis un point central. conic-gradient() crée une transition qui tourne autour d'un point central comme une roue chromatique. Les trois sont utilisés comme valeurs pour la propriété background-image.

Syntaxe et angles de linear-gradient

La syntaxe de base : linear-gradient(direction, couleur-1, couleur-2, ...). La direction peut être un mot-clé (to bottom, to right) ou un angle en degrés (0deg = vers le haut, 90deg = vers la droite, 180deg = vers le bas). Le système d'angles utilise une mesure de type boussole : 0deg pointe vers le haut, augmente dans le sens des aiguilles d'une montre.

/* Déclarations équivalentes */
background: linear-gradient(to bottom, #3A7BD5, #00D2FF);
background: linear-gradient(180deg, #3A7BD5, #00D2FF);

/* Diagonal */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* Multi-stop */
background: linear-gradient(
  to right,
  #f093fb 0%,
  #f5576c 50%,
  #4facfe 100%
);

Stops de couleur et transitions

Les stops de couleur définissent où chaque couleur commence et se termine dans le dégradé. Sans positions explicites, les couleurs sont réparties uniformément. Deux stops adjacents à la même position créent un bord dur (pas de transition) — utile pour les arrière-plans rayés. Un indicateur de couleur (une valeur unique entre deux stops) déplace le point milieu de la transition.

/* Stops durs — rayures */
background: linear-gradient(
  to right,
  #e74c3c 0% 33%,
  #3498db 33% 66%,
  #2ecc71 66% 100%
);

/* Fondu transparent */
background: linear-gradient(
  to bottom,
  rgba(0,0,0,0),
  rgba(0,0,0,0.8)
);

radial-gradient et conic-gradient

radial-gradient() rayonne depuis un point central. Syntaxe : radial-gradient(forme taille at position, couleurs). Forme : circle ou ellipse. conic-gradient() tourne autour d'un point central : les couleurs sont distribuées sur 360°. Utile pour les diagrammes circulaires, les roues chromatiques et les motifs de rotation.

/* Spotlight radial */
background: radial-gradient(
  circle at center,
  #3A7BD5 0%,
  transparent 70%
);

/* Conique — roue chromatique */
background: conic-gradient(
  red, yellow, lime, cyan, blue, magenta, red
);

Techniques créatives avec les dégradés

Texte dégradé : appliquer un dégradé à background-image, puis utiliser background-clip: text et -webkit-background-clip: text avec color: transparent. Bordures dégradées : utiliser background avec recadrage padding-box et border-box, ou la propriété border-image. Mesh gradients : superposer plusieurs dégradés radiaux. Dégradés adaptatifs pour mode sombre : utiliser des propriétés personnalisées CSS dans les fonctions de dégradé.

Performance et bonnes pratiques

Les dégradés CSS sont composites GPU et ont de bonnes performances dans la plupart des cas. Évitez d'animer les dégradés avec des transitions CSS sur background-image — les navigateurs ne peuvent pas interpoler entre les valeurs de dégradé nativement. Utilisez plutôt @property (CSS Houdini). Testez toujours l'accessibilité des dégradés : le texte sur des arrière-plans dégradés doit maintenir le contraste WCAG à chaque point du dégradé.

Questions fréquentes