Qu'est-ce qu'un dégradé de couleur et comment en créer en CSS

Un dégradé de couleur CSS est une transition fluide entre deux couleurs ou plus, rendue entièrement par le navigateur, sans aucun fichier image. Ce seul avantage fait des dégradés l'un des outils les plus pratiques dans la boîte à outils d'un développeur front-end. Ils réduisent les requêtes HTTP, s'adaptent parfaitement à n'importe quelle résolution et peuvent être mis à jour en une seule ligne de code. Que tu styles un bouton d'appel à l'action, que tu construises un arrière-plan hero pleine page ou que tu ajoutes de la profondeur à un composant carte, comprendre comment fonctionnent les dégradés CSS te donne un contrôle précis sur chaque pixel de cette transition.

Les dégradés linéaires expliqués

La fonction linear-gradient en CSS trace une transition de couleurs le long d'une ligne droite. La syntaxe de base ressemble à ceci :

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Le paramètre direction contrôle la direction du dégradé CSS. Tu peux utiliser des valeurs de mots-clés comme to right, to bottom left, ou un angle en degrés comme 135deg. Quand aucune direction n'est spécifiée, la valeur par défaut est to bottom (de haut en bas, 180 degrés).

Les points d'arrêt de couleur te donnent un contrôle précis. Chaque point peut inclure une position optionnelle :

/* Deux couleurs, de gauche à droite */
background-image: linear-gradient(to right, #6a11cb, #2575fc);

/* Trois couleurs avec positions explicites */
background-image: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #fda085 100%);

Ajouter une position en pourcentage à chaque point d'arrêt te permet de créer des bords nets (en plaçant deux points à la même position) ou de compresser/élargir la zone de transition. C'est la base des motifs rayés et des barres de progression. Avant d'utiliser des valeurs de couleur, assure-toi de comprendre comment CSS les interprète - notre guide de conversion HEX vers RGB explique la différence entre les formats et quand chacun est approprié.

Les dégradés radiaux expliqués

Un dégradé radial CSS rayonne vers l'extérieur depuis un point central en forme elliptique ou circulaire. La syntaxe ajoute trois paramètres optionnels : la forme, la taille et la position.

background-image: radial-gradient(shape size at position, color-stop1, color-stop2);

Voici ce que fait chaque paramètre :

• Forme : circle impose un cercle parfait ; ellipse (la valeur par défaut) s'étire pour s'adapter à l'élément.
• Taille : Des mots-clés comme closest-side, farthest-corner, ou des longueurs explicites contrôlent jusqu'où s'étend le dégradé.
• Position : Fonctionne exactement comme background-position - tu peux utiliser des mots-clés, des pourcentages ou des valeurs en pixels.

/* Effet projecteur */
background-image: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.3), transparent 60%);

Les dégradés radiaux sont idéaux pour les effets de projecteur, les boutons lumineux et les overlays de vignette douce sur les images hero.

Les dégradés coniques - L'ajout moderne

La fonction conic-gradient en CSS est la plus récente des trois et celle que la plupart des développeurs ignorent. Au lieu de rayonner vers l'extérieur, elle balaie autour d'un point central comme une roue chromatique ou un graphique en secteurs. La spécification W3C CSS Images Level 4 définit formellement les dégradés coniques, et tous les navigateurs modernes les prennent désormais en charge.

/* Graphique en secteurs - 40% bleu, 60% corail */
background-image: conic-gradient(#4f8ef7 0% 40%, #ff6b6b 40% 100%);

/* Roue chromatique complète */
background-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

Tu peux aussi faire pivoter l'angle de départ avec from Xdeg et décaler le centre avec at X% Y% :

background-image: conic-gradient(from 45deg at 60% 50%, #667eea, #764ba2, #667eea);

Les utilisations pratiques incluent les graphiques en secteurs en CSS pur, les motifs en damier et les spinners de chargement dynamiques.

Les dégradés répétés

CSS fournit repeating-linear-gradient et repeating-radial-gradient pour répéter un motif de dégradé sur un élément sans avoir à lister manuellement des dizaines de points d'arrêt. La règle clé : le motif ne se répète que si le dernier point d'arrêt n'atteint pas 100%.

/* Rayures diagonales */
background-image: repeating-linear-gradient(
  45deg,
  #f8f9fa,
  #f8f9fa 10px,
  #dee2e6 10px,
  #dee2e6 20px
);

/* Anneaux concentriques */
background-image: repeating-radial-gradient(
  circle at center,
  #fff 0px,
  #fff 5px,
  #e9ecef 5px,
  #e9ecef 10px
);

Les dégradés répétés sont performants car le navigateur génère l'intégralité du motif à partir d'une règle CSS compacte, sans aucun fichier image à télécharger.

Exemples pratiques

Bouton avec dégradé

Un cas d'usage courant est un bouton d'appel à l'action bien visible. L'astuce consiste à définir également background-size et à animer au survol :

.btn-gradient {
  background-image: linear-gradient(90deg, #6a11cb, #2575fc);
  border: none;
  border-radius: 6px;
  color: #fff;
  padding: 12px 28px;
  transition: opacity 0.3s ease;
}
.btn-gradient:hover {
  opacity: 0.85;
}

Arrière-plan hero pleine page

Un dégradé CSS en arrière-plan sur le body ou une section hero définit immédiatement le ton visuel :

.hero {
  background-image: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  min-height: 100vh;
}

Overlay sombre sur une image

Superposer un dégradé sur une photo permet de garder le texte lisible sans élément overlay séparé :

.card-image {
  background-image:
    linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.75) 100%),
    url('photo.jpg');
  background-size: cover;
}

Texte en dégradé

Les dégradés sur le texte nécessitent trois propriétés qui fonctionnent ensemble :

.gradient-text {
  background-image: linear-gradient(90deg, #f093fb, #f5576c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Note que background-clip: text nécessite encore le préfixe -webkit- dans certains navigateurs, donc inclus toujours les deux déclarations. Tu peux explorer et valider tes choix de couleurs avant d'écrire le moindre code grâce à l'outil Color Explorer.

Compatibilité navigateurs et solutions de repli

Les dégradés linéaires et radiaux sont entièrement supportés par tous les navigateurs majeurs depuis 2013. Les dégradés coniques ont atteint une prise en charge étendue en 2021 (Chrome 69, Firefox 83, Safari 12.1). Selon Can I Use, les dégradés coniques couvrent désormais plus de 93% de l'utilisation mondiale des navigateurs.

La bonne stratégie de repli est simple :

1. Déclare d'abord un background-color solide. Les navigateurs qui ne supportent pas le dégradé afficheront cette couleur.
2. Ajoute ensuite la règle background-image avec le dégradé. Les navigateurs compatibles la superposeront par-dessus.
3. Pour les dégradés coniques, ajoute un fallback linear-gradient entre la couleur solide et la règle conique.

.element {
  background-color: #6a11cb;                        /* fallback */
  background-image: linear-gradient(90deg, #6a11cb, #2575fc); /* navigateurs modernes */
}

Après avoir écrit tes règles de dégradé, pense à faire passer ta feuille de style dans un minificateur CSS pour supprimer les espaces inutiles et réduire la taille du fichier avant le déploiement.

Générer des dégradés CSS instantanément

Écrire la syntaxe des dégradés à la main est rapide une fois que tu connais les règles, mais prévisualiser des dizaines de combinaisons de couleurs en temps réel, c'est là qu'un générateur de dégradés en ligne fait vraiment gagner du temps. Au lieu de recharger le navigateur en boucle, tu peux déplacer les points d'arrêt, ajuster les angles et copier le CSS final en quelques secondes.

Si tu dois convertir une couleur depuis un fichier de design avant de construire ton dégradé, le convertisseur HEX vers RGB et le Color Picker sont tous deux de bons points de départ avant d'ouvrir le générateur de dégradés.

Crée de beaux dégradés CSS instantanément

Gratuit, sans inscription, fonctionne directement dans ton navigateur. Génère des dégradés linéaires, radiaux et coniques avec une prévisualisation en direct et un CSS prêt à copier.

Essaie l'outil couleur de DevDeck maintenant →

Conclusion

Les dégradés CSS remplacent les fichiers image par du code pur, te donnant des dégradés indépendants de la résolution, faciles à mettre à jour et rapides à charger. Commence par linear-gradient pour les transitions directionnelles, utilise radial-gradient pour les effets de projecteur et de lueur, et expérimente avec conic-gradient quand tu as besoin de motifs en secteurs ou en balayage. Inclus toujours une couleur de repli solide, garde un oeil sur les exigences de préfixes pour les dégradés de texte, et utilise un outil en direct pour accélérer le cycle d'itération design. Avec ces bases en place, tu as tout ce qu'il faut pour remplacer les images de dégradé statiques dans l'ensemble de ton projet.