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

[Canonical HTML page](https://gradiently.design/fr/guide/css-linear-gradient)

Chaque partie de linear-gradient() expliquée avec un exemple en direct à côté de son code, de la direction par défaut aux arrêts nets, reflets superposés et mélanges OKLCH plus fluides.

## The short version

- Un dégradé linéaire CSS est une image que le navigateur dessine le long d’une ligne droite, écrite avec la fonction linear-gradient() et utilisable partout où une image est acceptée, en général dans background-image.
- Sans direction, un dégradé linéaire va de haut en bas, ce qui équivaut à 180deg ; 0deg pointe vers le haut et les angles tournent dans le sens horaire.
- Les arrêts de couleur sans position sont répartis régulièrement, et deux arrêts à la même position font un bord net au lieu d’un mélange.
- Plusieurs dégradés peuvent être superposés dans un même background-image, séparés par des virgules, le premier étant dessiné au-dessus.
- Ajouter une méthode d’interpolation comme in oklch garde le milieu d’un mélange lumineux au lieu de le laisser virer au gris.

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.

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

Le dégradé linéaire le plus simple : deux couleurs, direction par défaut, avec une couleur unie dessous en repli.

Du marine au ciel, de haut en bas: `linear-gradient(#0f172a, #38bdf8)`

Le code ci-dessus, rendu. Sans direction, c’est de haut en bas.

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](https://gradiently.design/fr/guide/types-of-gradients).

## 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.

| Élément | Exemple | Ce qu’il fait |
| --- | --- | --- |
| Direction en angle | `135deg`, `0.25turn` | Fixe l’angle de la ligne du dégradé. 0deg pointe vers le haut, les angles tournent dans le sens horaire. |
| Direction en mots-clés | `to right`, `to top left` | Oriente la ligne vers un côté ou un coin de la boîte. |
| Méthode d’interpolation | `in oklch`, `in srgb` | Choisit l’espace colorimétrique dans lequel le mélange est calculé. |
| Arrêt de couleur | `#38bdf8 40%` | Une couleur, avec en option une ou deux positions le long de la ligne. |
| Point d’inflexion | `30%` entre deux arrêts | Déplace le point médian du mélange entre ses voisins. |

Les éléments de linear-gradient(), dans l’ordre où ils apparaissent. Seuls les arrêts de couleur sont obligatoires.

La référence complète se trouve sur la [page MDN de linear-gradient()](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/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`.

- 0deg : de bas en haut: `linear-gradient(0deg, #1e1b4b, #f472b6)`
- 90deg : de gauche à droite: `linear-gradient(90deg, #1e1b4b, #f472b6)`
- 180deg : le défaut: `linear-gradient(180deg, #1e1b4b, #f472b6)`
- 135deg : du haut gauche au bas droit: `linear-gradient(135deg, #1e1b4b, #f472b6)`

Une même paire indigo vers rose à quatre angles. La première couleur est toujours au début de la ligne.

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é](https://gradiently.design/fr/guide/gradient-angle).

> **Pourquoi les coins concordent toujours** La ligne du dégradé est étirée pour que ses première et dernière couleurs tombent exactement dans les coins. Pour une boîte de largeur W et de hauteur H à l’angle A, sa longueur est `abs(W × sin A) + abs(H × cos A)`. C’est pourquoi un dégradé de 135deg sur un élément très large paraît presque horizontal.

## 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.

```css
/* 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);
```

Trois façons de façonner le même mélange. Les positions peuvent aussi être des longueurs comme 120px.

- Espacement régulier: `linear-gradient(90deg, #0c4a6e, #22d3ee, #f0f9ff)`
- Inflexion à 20 %: `linear-gradient(90deg, #0c4a6e, 20%, #22d3ee)`
- Bande tenue, de 35 % à 65 %: `linear-gradient(90deg, #0c4a6e, #22d3ee 35% 65%, #f0f9ff)`

La même palette océan profond vers glace, façonnée de trois manières par les positions et les points d’inflexion.

## 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.

- Partage moitié-moitié: `linear-gradient(90deg, #f97316 50%, #1e293b 0)`
- Trois bandes ambre: `linear-gradient(180deg, #fde68a 0 33%, #f59e0b 0 66%, #b45309 0)`
- Rayures diagonales de danger: `repeating-linear-gradient(45deg, #1e293b 0 12px, #f97316 12px 24px)`

Les arrêts nets dessinent des formes au lieu de mélanges. Il y en a bien d’autres dans les [motifs CSS](https://gradiently.design/fr/guide/css-patterns).

## 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.

```css
.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);
}
```

Un reflet superposé à un dégradé de base. Le premier dégradé de la liste est dessiné au-dessus.

L’empilement est aussi la base d’effets plus riches : des halos radiaux superposés font un [dégradé maillé en CSS](https://gradiently.design/fr/guide/css-mesh-gradient), et une fine couche de bruit par-dessus cache les paliers, comme l’explique le [banding des dégradés](https://gradiently.design/fr/guide/gradient-banding).

## 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](https://gradiently.design/fr/guide/css-gradient-oklch) traite des sens de teinte et des replis.

- sRGB par défaut : milieu gris: `linear-gradient(90deg, #2563eb, #facc15)`
- in oklab : milieu plus net: `linear-gradient(90deg in oklab, #2563eb, #facc15)`
- in oklch : passe par les teintes: `linear-gradient(90deg in oklch, #2563eb, #facc15)`

Du bleu au jaune de trois façons. Seule la méthode d’interpolation change.

### À éviter

- De longs mélanges entre teintes opposées en sRGB simple
- `to top right` quand plusieurs cartes de formes différentes doivent partager une même direction
- S’estomper vers `white` quand on veut disparaître : utilisez `transparent`
- Des mélanges très lisses, sombres et larges sans grain, qui font des paliers sur beaucoup d’écrans

### À faire

- Ajouter `in oklch` ou un arrêt intermédiaire pour garder des mélanges vifs
- Utiliser un seul angle, comme `135deg`, pour un système cohérent
- Estomper les calques vers `transparent` pour laisser voir ce qui est dessous
- Ajouter un léger calque de bruit sur les grands dégradés sombres

## 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](https://caniuse.com/css-gradients) 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.

```css
.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);
}
```

Amélioration progressive : chaque ligne remplace la précédente seulement si le navigateur la comprend.

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](https://gradiently.design/fr/guide/gradient-generator) 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.

## FAQ

### Comment faire un dégradé linéaire en CSS ?

Définissez `background-image: linear-gradient(direction, couleur1, couleur2)` sur un élément, par exemple `linear-gradient(90deg, #0f172a, #38bdf8)`. Ajoutez une `background-color` avant comme repli.

### Quelle est la direction par défaut d’un dégradé linéaire CSS ?

De haut en bas, comme `to bottom` ou `180deg`. La première couleur apparaît en haut et la dernière en bas.

### Comment faire une ligne nette dans un dégradé linéaire ?

Donnez la même position à deux arrêts voisins, comme `#f97316 50%, #1e293b 50%`, ou utilisez `0` comme seconde position pour qu’elle soit ramenée à l’arrêt précédent.

### Pourquoi le milieu de mon dégradé paraît-il gris ?

Les couleurs hex se mélangent en sRGB par défaut, ce qui ternit le point médian entre teintes éloignées. Ajoutez `in oklch` ou `in oklab` après l’angle, ou insérez un arrêt intermédiaire plus vif.

### 45deg est-il la même chose que to top right ?

Seulement sur un carré. `45deg` pointe toujours à 45 degrés, tandis que `to top right` ajuste son angle pour que la couleur du milieu passe entre les deux autres coins de la boîte.