Dégradé linéaire CSS : le guide complet de linear-gradient()

Un dégradé linéaire CSS est une image que le navigateur dessine le long d’une ligne droite, en fondant une couleur dans la suivante. Vous l’écrivez avec la fonction linear-gradient() et l’utilisez partout où le CSS accepte une image, le plus souvent background-image. Il n’exige aucun fichier, s’adapte à toute taille sans flou et ne coûte rien à télécharger. La version utile la plus courte compte deux couleurs : linear-gradient(#0f172a, #38bdf8) passe d’un bleu marine profond en haut à un bleu ciel en bas.

.hero {
  background-color: #0f172a; /* shown if the gradient fails */
  background-image: linear-gradient(#0f172a, #38bdf8);
}

Ce guide passe en revue chaque partie de la fonction dans l’ordre où vous la rencontrez. Pour la vue d’ensemble de la comparaison entre dégradés linéaires, radiaux, coniques et maillés, commencez par les types de dégradés.

La syntaxe de linear-gradient()

La fonction prend une direction facultative, une méthode d’interpolation des couleurs facultative, puis une liste d’au moins deux arrêts de couleur. Tout est séparé par des virgules, sauf la direction et la méthode d’interpolation, qui partagent le premier argument.

La référence complète se trouve sur la page MDN de linear-gradient(), qui documente aussi la grammaire exacte de la spécification CSS Images.

Angles de dégradé et mots-clés de direction

Les angles suivent une boussole : 0deg pointe vers le haut, 90deg vers la droite, 180deg vers le bas et 270deg vers la gauche. Le dégradé part du côté opposé et va vers la direction donnée : 90deg va donc de gauche à droite. Vous pouvez aussi écrire turn, rad ou grad, où 0.25turn équivaut à 90deg. Par défaut, sans rien préciser, c’est to bottom.

Les mots-clés de coin ne sont pas des angles de 45 degrés. to top right incline la ligne pour que la couleur du milieu passe exactement entre les deux autres coins, quelle que soit la forme de la boîte. Sur une bannière large, cette ligne est bien plus plate que 45deg, qui pointe toujours à 45 degrés et ignore la forme de la boîte. Utilisez les mots-clés quand le mélange doit respecter les coins, et les angles quand plusieurs éléments de formes différentes doivent partager une même direction. Plus de détails sur le choix des directions dans les angles de dégradé.

Arrêts de couleur, positions et points d’inflexion

Les arrêts sans position sont espacés régulièrement : trois couleurs se placent donc à 0 %, 50 % et 100 %. Donnez à un arrêt une position en pourcentage ou en longueur pour le déplacer. Donnez-lui deux positions et la couleur reste pleine entre elles. Placez un pourcentage isolé entre deux arrêts et il devient un point d’inflexion : le point où le mélange atteint sa couleur médiane, ce qui rend un côté de la transition plus rapide que l’autre.

/* even spacing */
background-image: linear-gradient(90deg, #0c4a6e, #22d3ee, #f0f9ff);

/* a hint: the midpoint arrives early, at 20% */
background-image: linear-gradient(90deg, #0c4a6e, 20%, #22d3ee);

/* two positions: cyan holds solid from 35% to 65% */
background-image: linear-gradient(90deg, #0c4a6e, #22d3ee 35% 65%, #f0f9ff);

Arrêts nets pour rayures et partages

Quand deux arrêts partagent une position, il n’y a pas de place pour mélanger : on obtient un bord net. Les navigateurs ramènent aussi un arrêt placé avant le précédent à la position de celui-ci, d’où un raccourci pratique : #f97316 50%, #1e293b 0 signifie que la seconde couleur commence exactement où la première finit. Répétez l’idée avec repeating-linear-gradient() et vous avez des rayures.

Superposer plusieurs dégradés dans un même arrière-plan

background-image accepte une liste séparée par des virgules, et la première image est peinte au-dessus. Les calques ne se voient l’un à travers l’autre que là où ils sont transparents : les dégradés du dessus s’estompent donc en général vers transparent. Les navigateurs modernes mélangent en alpha prémultiplié, si bien que s’estomper vers transparent n’injecte plus une teinte grise dans la couleur comme autrefois. Associez les calques à background-size et background-repeat quand un calque ne doit couvrir qu’une partie de la boîte.

.card {
  background-color: #111827;
  background-image:
    /* top: a soft sheen across the upper third */
    linear-gradient(180deg, rgb(255 255 255 / 0.12), transparent 35%),
    /* bottom: the colour itself */
    linear-gradient(135deg, #312e81, #7c3aed 55%, #db2777);
}

L’empilement est aussi la base d’effets plus riches : des halos radiaux superposés font un dégradé maillé en CSS, et une fine couche de bruit par-dessus cache les paliers, comme l’explique le banding des dégradés.

Des mélanges plus fluides avec l’interpolation des couleurs

Quand toutes les couleurs sont écrites dans un format historique comme l’hex, rgb() ou hsl(), le navigateur mélange en sRGB par souci de compatibilité. Les mélanges sRGB entre teintes éloignées passent par des milieux ternes et grisâtres : du bleu au jaune est le cas classique. Ajouter in oklab ou in oklch demande un espace colorimétrique perceptuel, qui garde le milieu plus clair et plus régulier. Le guide dédié aux dégradés OKLCH en CSS traite des sens de teinte et des replis.

Prise en charge et replis

linear-gradient() fonctionne sans préfixe dans tous les navigateurs actuels : les anciennes versions -webkit- peuvent disparaître. Les méthodes d’interpolation, les arrêts à deux positions et les points d’inflexion sont plus récents ; consultez caniuse pour le détail. Le motif le plus sûr est une background-color unie d’abord, puis le dégradé, puis toute version améliorée dans une déclaration ultérieure, que les anciens navigateurs sautent car ils ne savent pas la lire.

.banner {
  background-color: #1e3a8a;
  background-image: linear-gradient(90deg, #1e3a8a, #f59e0b);
  /* browsers that understand interpolation methods use this line */
  background-image: linear-gradient(90deg in oklch, #1e3a8a, #f59e0b);
}

Si vous préférez partir d’un mélange qui a déjà du caractère plutôt que de régler les arrêts à la main, un générateur de dégradés ou une bibliothèque d’arrière-plans prêts à l’emploi fait gagner du temps. Dans les deux cas, gardez le code : un dégradé en CSS reste net à toute taille et pèse quelques octets.