# Dégradé maillé CSS : le construire avec des calques radiaux

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

Il n’existe pas de mesh-gradient() en CSS. Voici la méthode des calques qui en fait un faux convaincant, le flou et le grain qui le finissent, et quand une image ou un shader est le meilleur choix.

## The short version

- Le CSS n’a pas de fonction native de dégradé maillé : un dégradé maillé CSS se construit donc en empilant plusieurs dégradés radiaux sur une couleur de base unie.
- Chaque calque est une nappe de couleur à sa propre position qui s’estompe vers le transparent, et les chevauchements créent le mélange doux et multidirectionnel d’un maillage.
- Un filtre de flou sur un pseudo-élément adoucit encore les nappes, et une légère couche de bruit masque les paliers.
- Les dégradés superposés statiques sont peu coûteux à rendre, mais les grands flous et les calques animés se redessinent souvent : gardez-les lents, petits ou facultatifs.
- Quand un design demande beaucoup de points de couleur, des formes déformées ou un mouvement fluide en plein écran, une image exportée, une vidéo ou un shader WebGL est en général le meilleur outil.

Un **dégradé maillé CSS** est un arrière-plan où la couleur se mélange dans plusieurs directions à la fois, comme si des nappes de pigment s’étaient imbibées les unes dans les autres. Le CSS n’a pas de fonction de maillage, et les dégradés maillés jadis esquissés pour SVG n’ont jamais été livrés dans les navigateurs : la version web est donc un faux, trois à cinq calques `radial-gradient()` empilés sur une couleur unie, chacun s’estompant vers `transparent`. Bien fait, il est assez proche pour que personne ne remarque la différence, pèse quelques centaines d’octets et reste net à toute taille.

Pour la théorie de design d’abord, ce qu’est un maillage et pourquoi il paraît organique, lisez les [dégradés maillés](https://gradiently.design/fr/guide/mesh-gradients). Ce guide explique comment en construire un dans le code.

## Comment fonctionne la méthode des calques

Chaque calque est un point de couleur. Sa position est la valeur `at`, sa portée la distance d’estompage, et sa force l’alpha de la couleur. Comme le premier dégradé de `background-image` est peint au-dessus, l’ordre compte moins qu’on pourrait le croire : chaque calque est en grande partie transparent, donc ils se mêlent là où ils se chevauchent. La `background-color` de base transparaît partout où aucune nappe n’arrive.

- Nappe 1 : violet, en haut à gauche: `radial-gradient(circle at 15% 20%, #7c3aed, #0b1026 55%)`
- Nappe 2 : rose, en haut à droite: `radial-gradient(circle at 85% 25%, #ec4899, #0b1026 50%)`
- Nappe 3 : cyan, en bas: `radial-gradient(ellipse at 60% 90%, #06b6d4, #0b1026 60%)`
- Nappe 4 : accent ambre: `radial-gradient(circle at 25% 80%, #f59e0b, #0b1026 45%)`

Les quatre points de couleur d’un maillage, chacun montré seul sur le fond marine. Empilés, ils se fondent en un seul champ.

```css
.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(circle at 15% 20%, rgb(124 58 237 / 0.85), transparent 55%),
    radial-gradient(circle at 85% 25%, rgb(236 72 153 / 0.75), transparent 50%),
    radial-gradient(ellipse at 60% 90%, rgb(6 182 212 / 0.7), transparent 60%),
    radial-gradient(circle at 25% 80%, rgb(245 158 11 / 0.55), transparent 45%);
}
```

La pile complète. Changez une valeur `at` et toute la composition se rééquilibre.

## Pas à pas : construire votre propre dégradé maillé CSS

1. **Choisissez un fond** Prenez la couleur unie qui apparaît entre les nappes. Les fonds sombres font rayonner les nappes ; les fonds clairs leur donnent un air d’aquarelle. Le fond est aussi votre repli si les dégradés échouent.
2. **Choisissez trois à cinq couleurs proches** Les teintes voisines se mélangent proprement. Les opposées, comme le bleu et l’orange, se rejoignent en une tache grise. Les [dégradés boueux](https://gradiently.design/fr/guide/muddy-gradients) expliquent pourquoi et comment l’éviter.
3. **Placez les nappes hors du centre** Poussez les points vers les coins et les bords, et laissez au moins l’un dépasser en partie de la boîte, comme `at 110% 0%`. Des nappes centrées font une cible.
4. **Variez portée et force** Donnez à une couleur le plus grand estompage et l’alpha le plus élevé pour qu’elle mène. Gardez l’accent petit et plus faible. Des nappes égales font mécanique.
5. **Mélangez dans un meilleur espace colorimétrique** Ajoutez `in oklab` à chaque calque, comme dans `radial-gradient(in oklab circle at 15% 20%, ...)`, là où c’est pris en charge. Les chevauchements restent plus lumineux qu’en sRGB.
6. **Finissez par du grain** Les grands estompages doux font des paliers sur beaucoup d’écrans. Une légère couche de bruit règle le problème et donne un aspect imprimé ; voir plus bas.

## Des mélanges plus doux avec le flou

Les estompages radiaux sont lisses, mais leurs formes sont visiblement rondes. Un flou adoucit les cercles en quelque chose de plus organique. Placez les calques sur un pseudo-élément, floutez-le et surdimensionnez-le avec un `inset` négatif pour que les bords flous ne s’estompent pas dans la page. `isolation: isolate` garde le `z-index` négatif à l’intérieur du composant.

```css
.mesh {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #0b1026;
}

.mesh::before {
  content: "";
  position: absolute;
  inset: -15%;
  z-index: -1;
  background-image:
    radial-gradient(circle at 20% 25%, #7c3aed, transparent 40%),
    radial-gradient(circle at 80% 30%, #ec4899, transparent 35%),
    radial-gradient(circle at 55% 85%, #06b6d4, transparent 40%);
  filter: blur(48px);
}
```

Un maillage flouté sur un pseudo-élément. Le texte dans `.mesh` reste net car seul le pseudo-élément est flouté.

> **Le flou est la partie coûteuse** Un flou statique est dessiné une fois et passe en général sans problème. Un calque flouté qui bouge ou se redimensionne est redessiné à chaque image, et de grands rayons de flou en plein écran coûtent le plus. Voyez la [performance des dégradés CSS](https://gradiently.design/fr/guide/css-gradient-performance).

## Ajouter du grain à un dégradé maillé CSS

Le grain remplit deux rôles. Il casse les paliers visibles qui apparaissent dans les grands estompages peu contrastés, et il donne à la surface la qualité tactile, façon pellicule, qui fait paraître les dégradés réfléchis plutôt que par défaut. En CSS, la source habituelle est un filtre SVG `feTurbulence` utilisé comme minuscule image de fond, superposé à faible opacité. La technique complète est dans la [texture de bruit CSS](https://gradiently.design/fr/guide/css-noise-texture), et le raisonnement de design dans les [dégradés granuleux](https://gradiently.design/fr/guide/grainy-gradients).

### Sans grain

- Des anneaux visibles dans les zones sombres sur beaucoup d’écrans
- La surface se lit comme une couleur d’écran plate
- Ressemble à un réglage par défaut

### Avec un léger grain

- Les paliers sont cassés et disparaissent
- La surface se lit comme du papier, de la pellicule ou de l’imprimé
- Paraît voulu et abouti

## Animer un dégradé maillé

Les positions d’un dégradé ne sont pas animables seules, mais les propriétés personnalisées enregistrées le sont. Déclarez chaque coordonnée mobile avec `@property`, utilisez-la dans le dégradé et animez la propriété. Gardez un mouvement lent et coupez-le pour ceux qui demandent un [mouvement réduit](https://gradiently.design/fr/guide/reduced-motion).

```css
@property --x1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 15%;
}

.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(circle at var(--x1) 20%, rgb(124 58 237 / 0.85), transparent 55%),
    radial-gradient(ellipse at 60% 90%, rgb(6 182 212 / 0.7), transparent 60%);
  animation: drift 20s ease-in-out infinite alternate;
}

@keyframes drift {
  to { --x1: 55%; }
}

@media (prefers-reduced-motion: reduce) {
  .mesh { animation: none; }
}
```

Une nappe qui dérive en haut. Ajoutez une propriété de plus pour chaque coordonnée que vous voulez faire bouger.

Chaque image de cette animation redessine tout l’arrière-plan. Sur une petite carte, c’est trivial ; sur un hero plein écran, cela vaut la peine d’être mesuré. Le guide du [dégradé animé](https://gradiently.design/fr/guide/css-animated-gradient) présente des alternatives moins coûteuses, comme déplacer un calque surdimensionné avec `transform`.

## Quand utiliser plutôt une image ou du WebGL

| Approche | Idéal pour | À surveiller |
| --- | --- | --- |
| Dégradés CSS superposés | Arrière-plans statiques, cartes, heros de trois à cinq couleurs | Nappes d’allure ronde, paliers sans grain |
| CSS avec flou | Champs statiques plus doux et plus organiques | Coût de redessin si animé ou redimensionné souvent |
| Image exportée (AVIF ou WebP) | Maillages complexes à nombreux points ou formes picturales | Poids du fichier, et un recadrage fixe par format |
| Boucle vidéo | Un mouvement riche dans un hero | Taille du fichier, règles de lecture automatique, mouvement réduit |
| Shader WebGL | Mouvement plein écran, fluide et interactif | Complexité du code, consommation de batterie, replis |

Choisissez l’outil le plus léger qui rende encore bien.

Les shaders sont traités dans les [dégradés WebGL](https://gradiently.design/fr/guide/shader-gradients). Une voie médiane est de concevoir l’arrière-plan une fois comme une matière vivante et de l’exporter : les Marks de Gradiently sont des matières de type maillage avec couleur, grain, lumière et mouvement, et un design créé avec l’un d’eux s’exporte en PNG, en JPEG ou en boucle vidéo parfaite de 5 à 30 secondes.

Un Mark : nappes de couleur, matière et grain rendus en direct plutôt qu’approchés par des calques.

## FAQ

### Peut-on faire un dégradé maillé en CSS pur ?

Pas nativement, mais empiler trois à cinq dégradés radiaux qui s’estompent vers le transparent sur une couleur de base donne un maillage convaincant. Un flou et une couche de bruit le finissent.

### Combien de dégradés radiaux faut-il pour un maillage CSS ?

Trois à cinq suffisent en général. Moins, cela ressemble à une simple lueur ; plus, cela tend à devenir boueux et plus difficile à équilibrer.

### Pourquoi mon dégradé maillé CSS paraît-il boueux ?

Des teintes opposées qui se rejoignent en sRGB se mélangent en passant par le gris. Utilisez des couleurs voisines, réduisez le chevauchement ou ajoutez `in oklab` à chaque calque.

### Un dégradé maillé CSS nuit-il à la performance ?

Un dégradé statique est peu coûteux. Les coûts augmentent avec les grands filtres de flou et avec l’animation, car l’arrière-plan se redessine à chaque image.

### SVG prend-il en charge les dégradés maillés ?

Les dégradés maillés ont été esquissés pour SVG 2 mais les navigateurs ne les ont jamais implémentés : sur le web, on les imite avec des calques, on utilise une image, ou on les rend avec WebGL.