# Les dégradés transparents en CSS : fondus, voiles et scrims

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

Un dégradé qui s’efface vers le néant est l’un des outils les plus utiles du CSS. Il laissait aussi une traînée grise au milieu. Voici comment fonctionne aujourd’hui la transparence dans les dégradés, et les modèles à retenir.

## The short version

- Pour rendre un dégradé CSS transparent, utilisez comme arrêt une couleur à alpha nul, comme transparent ou rgb(124 58 237 / 0).
- Les navigateurs modernes interpolent les couleurs des dégradés en alpha prémultiplié : fondre une couleur vers le mot-clé transparent ne produit plus de bande grise.
- Un dégradé d’arrière-plan ne peut fondre que l’arrière-plan ; pour fondre le contenu réel d’un élément, utilisez mask-image avec un dégradé.
- Un voile à plusieurs arrêts adoucis paraît plus fluide qu’un fondu à deux arrêts, qui laisse un bord visible là où l’assombrissement s’arrête.
- Un dégradé radial transparent au centre et sombre à l’extérieur crée un projecteur qui attire l’attention sur une zone.

Pour rendre un **dégradé CSS transparent**, donnez à l’un de ses arrêts une couleur à alpha nul : `linear-gradient(to bottom, #7c3aed, transparent)` fond le violet vers le néant et laisse voir ce qui se trouve en dessous. La même idée sert aux fondus en fin de texte, aux voiles sombres derrière les légendes et aux voiles colorés sur les photos. Pour fondre le contenu d’un élément plutôt que son arrière-plan, utilisez plutôt `mask-image` avec un dégradé.

## Les façons d’écrire une couleur transparente

| Vous écrivez | Signifie | À utiliser quand |
| --- | --- | --- |
| `transparent` | Du noir à alpha nul | Vous fondez n’importe quelle couleur, dans les navigateurs modernes |
| `rgb(124 58 237 / 0)` | Ce violet à alpha nul | Vous voulez être explicite, ou prendre en charge de très anciens navigateurs |
| `rgb(124 58 237 / 0.4)` | Ce violet à 40 % | Une teinte qui ne disparaît jamais complètement |
| `#7c3aed66` | Hexadécimal à huit chiffres, environ 40 % | Des outils de design qui exportent l’hexadécimal avec alpha |
| `color-mix(in srgb, var(--brand) 40%, transparent)` | La couleur d’une variable à 40 % | Des couleurs stockées dans des propriétés personnalisées |

Cinq façons de dire à peu près la même chose. La forme `color-mix()` est la seule qui fonctionne sur une couleur que vous ne connaissez que sous forme de variable ; voyez [color-mix() en CSS](https://gradiently.design/fr/guide/css-color-mix).

## Pourquoi les fondus viraient au gris

Le mot-clé `transparent` est du noir à alpha nul. Les premiers navigateurs mélangeaient séparément les canaux rouge, vert et bleu et le canal alpha : un fondu du blanc vers `transparent` passait donc par un gris semi-transparent en chemin. C’est pourquoi les anciens tutoriels insistent sur `rgba(255, 255, 255, 0)`.

La spécification impose désormais l’alpha prémultiplié : chaque couleur est pondérée par son opacité avant le mélange, si bien qu’un arrêt totalement transparent n’apporte aucune couleur. Tous les navigateurs actuels le font. Écrire la couleur correspondante à alpha nul reste une habitude sans risque, et elle vous protège dans les clients de messagerie et les anciennes WebViews.

### Ancien comportement

- Le blanc vers `transparent` passe par le gris
- Canaux de couleur mélangés sans tenir compte de l’opacité
- Contournement : répéter la couleur à alpha nul

### Navigateurs actuels

- Le blanc vers `transparent` reste blanc en s’effaçant
- Alpha prémultiplié, comme l’exige la spécification
- Les deux formes marchent ; l’explicite est plus portable

- Violet qui s’efface: `linear-gradient(to bottom, #7c3aed 0%, rgb(124 58 237 / 0) 100%)`
- Canard qui s’efface à 70 %: `linear-gradient(to right, #0f766e 0%, rgb(15 118 110 / 0) 70%)`
- Halo orange sur le vide: `radial-gradient(circle at 30% 30%, #f97316 0%, rgb(249 115 22 / 0) 60%)`

Trois fondus affichés sur le propre fond de cette page, exactement comme dans votre mise en page. Empilez de tels fondus sur une couleur de base pour construire des fonds doux et superposés.

L’endroit où s’arrête le fondu compte autant que ses couleurs. Un arrêt à 70 % termine le fondu tôt et laisse le reste de la boîte totalement dégagé, idéal pour une teinte qui ne doit toucher qu’un bord. Deux arrêts à la même position créent une coupure nette de la couleur au vide, utile pour les barres à moitié remplies et les fonds partagés. Les positions d’arrêt sont expliquées dans [les dégradés linéaires CSS](https://gradiently.design/fr/guide/css-linear-gradient).

## Fondre le contenu avec mask-image

Un dégradé d’arrière-plan se trouve derrière le contenu : il ne peut donc pas fondre du texte, des images ou une liste qui défile. Un masque le peut. Avec `mask-image`, les parties opaques du dégradé gardent l’élément visible et les parties transparentes le masquent. La couleur du masque n’a pas d’importance, seul son alpha compte.

```css
/* Fade the last lines of a teaser paragraph */
.teaser {
  max-height: 9rem;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

/* Soft edges on a horizontally scrolling row */
.carousel {
  overflow-x: auto;
  mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

/* Fade a photo into the page on any background colour */
.hero-photo {
  mask-image: linear-gradient(to bottom, #000 50%, transparent 95%);
}
```

Les masques fondent ce qui est là, sur n’importe quelle couleur de page, claire ou sombre. `mask-image` sans préfixe fonctionne dans les navigateurs actuels ; ajoutez `-webkit-mask-image` pour les anciens Safari.

L’ancienne alternative était un dégradé blanc posé sur le contenu. Il casse dès que la page n’est pas blanche, en [mode sombre](https://gradiently.design/fr/guide/dark-mode-design) par exemple, et il bloque les clics si vous oubliez `pointer-events: none`. Un masque n’a aucun de ces problèmes.

## Les scrims : des dégradés transparents pour le texte

Un scrim assombrit une partie d’une image pour que le texte posé dessus se lise, puis s’efface jusqu’à la transparence totale pour que le reste de la photo reste lumineux. Un fondu à deux arrêts fonctionne, mais sa rampe droite laisse une ligne visible là où l’assombrissement s’arrête. Davantage d’arrêts, espacés pour adoucir la fin, masquent ce bord.

Scrim adouci, sept arrêts: `linear-gradient(to top, rgb(2 6 23 / 0.8) 0%, rgb(2 6 23 / 0.62) 15%, rgb(2 6 23 / 0.42) 30%, rgb(2 6 23 / 0.24) 48%, rgb(2 6 23 / 0.1) 66%, rgb(2 6 23 / 0.03) 82%, rgb(2 6 23 / 0) 100%)`

L’opacité baisse vite près du texte et lentement vers le haut, ce qui se lit comme une ombre naturelle plutôt que comme une bande.

```css
.card {
  background-image:
    linear-gradient(to top,
      rgb(2 6 23 / 0.8) 0%, rgb(2 6 23 / 0.62) 15%, rgb(2 6 23 / 0.42) 30%,
      rgb(2 6 23 / 0.24) 48%, rgb(2 6 23 / 0.1) 66%, rgb(2 6 23 / 0.03) 82%,
      rgb(2 6 23 / 0) 100%),
    url("/images/coast.jpg");
  background-size: cover;
  color: #f8fafc;
}
```

Le scrim est le premier calque d’arrière-plan : il se trouve donc au-dessus de la photo.

Teintez le scrim d’une version profonde de la couleur de la photo plutôt que de noir pur, et il fera partie de l’image. Sur une photo de coucher de soleil chaude, un brun profond comme `rgb(41 20 8 / 0.75)` se fond dans l’image, là où le noir ressemblerait à un filtre posé dessus. [Les voiles en dégradé en CSS](https://gradiently.design/fr/guide/css-gradient-overlay) traite des lavis de couleur et des modes de fusion, et [le texte sur une image](https://gradiently.design/fr/guide/text-over-image) du placement.

## Trous transparents et projecteurs

Inversez l’idée : transparent au centre, sombre à l’extérieur. Un [dégradé radial](https://gradiently.design/fr/guide/css-radial-gradient) posé sur une page ou une image laisse une zone éclairée et atténue discrètement tout le reste, ce qui convient aux conseils d’accueil, aux gros plans produit et aux diapositives.

```css
.spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--x, 50%) var(--y, 40%),
    transparent 0 140px,
    rgb(2 6 23 / 0.72) 220px
  );
}
```

Définissez `--x` et `--y` en JavaScript pour déplacer le projecteur. Le fondu de 80 pixels entre les arrêts garde le bord doux.

Une publication produit au format portrait dont le titre repose sur une zone lumineuse du dégradé

Sans aucun modelage, les mots rivalisent avec la partie la plus lumineuse du fond.

La même publication produit avec une zone plus calme et plus profonde du dégradé derrière le titre

Le fond s’apaise de lui-même derrière les mots, le rôle que joue un scrim sur un site web.

Pour les publications sociales et l’imprimé, vous avez rarement besoin de construire des scrims à la main. Dans Gradiently, le Mark lui-même fait de la place à vos mots, en approfondissant ou en éclaircissant les couleurs près des lettres, sans calque de voile à régler pour chaque taille.

## FAQ

### Comment faire un dégradé CSS qui s’efface vers la transparence ?

Utilisez une couleur à alpha nul comme dernier arrêt : `linear-gradient(#7c3aed, transparent)` ou, pour être explicite, `linear-gradient(#7c3aed, rgb(124 58 237 / 0))`.

### Pourquoi mon dégradé vers transparent paraît-il gris ?

Les anciens navigateurs mélangent sans alpha prémultiplié : `transparent` (du noir transparent) grise le milieu. Fondez plutôt vers votre couleur à alpha nul.

### Comment faire disparaître en fondu un texte ou une image en CSS ?

Utilisez `mask-image` avec un dégradé, comme `mask-image: linear-gradient(#000 60%, transparent)`. L’élément s’efface sur n’importe quelle couleur de fond.

### Qu’est-ce qu’un scrim en CSS ?

Un dégradé qui assombrit une partie d’une image derrière du texte et s’efface ailleurs jusqu’à la transparence, pour que le texte se lise et que l’image reste lumineuse.

### Un dégradé CSS peut-il avoir un trou transparent ?

Oui. Un dégradé radial transparent au centre et sombre plus loin laisse un projecteur dégagé sur ce qui se trouve en dessous.