# Les matières de dégradé expliquées : soie, aurore, grain et les autres

[Canonical HTML page](https://gradiently.design/fr/guide/mark-materials-explained)

Deux Marks peuvent partager une palette sans se ressembler du tout, car c’est la matière qui décide du comportement de la couleur. Un tour des familles, de la façon dont couches, lumière et grain se combinent, et de ce que chacune exprime.

## The short version

- Une matière de dégradé est la structure que la couleur remplit : un lustre, une lueur, un tissage, une pierre, un grain.
- Chaque Mark Gradiently est construit à partir de trois couches de matière empilées au maximum, une base et jusqu’à deux autres fondues par-dessus.
- Les matières de Gradiently sont regroupées en quatorze familles, de Dégradé et Lumière à Textile, Minéral, Verre, Métal et Peinture.
- La lumière, le grain et le mouvement se règlent dans chaque couche, si bien qu’une même matière peut être discrète ou spectaculaire.
- Choisissez une matière pour ce que sa surface évoque : le grain pour l’imprimé et l’artisanat, la soie pour le luxe, le verre et le chrome pour la technologie.

Les **matières de dégradé** font qu’un dégradé ressemble à quelque chose plutôt qu’à un simple fondu entre deux couleurs. Une matière est la structure que la couleur remplit : un lustre directionnel dans Soie, des rideaux de lumière dans Aurore, des éclosions douces dans Maillage, du sable dans Limon, des veines dans le marbre. Chaque Mark Gradiently en empile jusqu’à trois, puis ajoute lumière, grain et mouvement, et c’est pourquoi deux Marks de même palette peuvent ne pas se ressembler du tout.

## Ce qu’est une matière

Voyez la palette comme la peinture et la matière comme la surface sur laquelle on l’applique. Versez le même marine, le même bleu canard et le même orange sur de la soie, du verre dépoli ou du papier fait main, et vous obtenez trois objets différents. Dans un Mark, chaque matière puise dans la palette du Mark : changer de matière change le caractère sans changer les couleurs.

- Soie : un lustre directionnel: `linear-gradient(115deg, #1b2a3a 0%, #2f5d62 30%, #9fd3c7 46%, #2f5d62 60%, #1b2a3a 100%)`
- Aurore : une lumière qui monte: `linear-gradient(0deg, #9fd3c7 0%, #2f5d62 18%, #1b2a3a 55%, #0b1419 100%)`
- Maillage : des éclosions douces: `radial-gradient(circle at 30% 35%, #d9822b 0%, transparent 40%), radial-gradient(circle at 70% 65%, #2f5d62 0%, transparent 45%), linear-gradient(135deg, #1b2a3a 0%, #2f5d62 100%)`
- Halo : une seule flaque de lumière: `radial-gradient(circle at 50% 40%, #d9822b 0%, #6b3410 30%, #0b1419 70%)`

Des esquisses CSS de quatre matières dans une même palette. Les vrais Marks rendent une structure bien plus riche, mais même celles-ci montrent tout ce que décide la matière.

## Les quatorze familles de matières

Gradiently regroupe ses matières en familles selon ce à quoi elles ressemblent. Les noms ci-dessous sont de vraies matières que vous croiserez sur le [Marché](/market) ; chaque famille en contient bien d’autres.

| Famille | Ce que c’est | Matières que vous croiserez |
| --- | --- | --- |
| Dégradé | Fondus, orbes et champs de couleur | Coins, Orbes, Grain diffus, Perle |
| Lumière | Lueurs, halos et faisceaux | Halo, Scène, Néon, Rayons |
| Fluide | Liquides, encre et métal | Encre, Mercure, Coulée, Lave |
| Atmosphère | Brouillard, nuages et ciel | Brume, Crépuscule, Cumulus, Brume sur le lac |
| Cosmos | Gaz, étoiles et espace profond | Nébuleuse, Galaxie, Voie lactée, Éclipse |
| Organique | Croissance, cellules et pétales | Cellules, Corail, Rose, Fougère |
| Minéral | Pierre, marbre et sable | Veine, Limon, Agate, Travertin |
| Textile | Soie, tissage et maille | Soie, Lin, Velours, Satin |
| Verre | Givre, prisme et eau | Dépoli, Prisme, Cannelé, Vitrail |
| Géométrique | Lignes, points et carreaux | Trame, Arcs, Grille, Truchet |
| Grain | Papier, impression et pellicule | Fibre, Riso, Pellicule, Tramage |
| Métal | Brossé, anodisé et en fusion | Métal brossé, Anodisé, Fusion, Patine |
| Peinture | Huile, gouache et pinceau | Empâtement, Gouache, Acrylique, Peinture en aérosol |
| Numérique | Écrans, parasites et pixels | Écran cathodique, Parasites, Tri de pixels, Mur de LED |

Les familles telles que Gradiently les nomme. Grain est une famille à part entière, et aussi un réglage présent dans chaque couche.

### Soie, aurore et maillage

Ce sont les trois matières sur lesquelles on pose le plus de questions. **Soie** est un lustre directionnel sur des fils fins : élégante, un peu formelle, à l’aise avec la beauté et la mode. **Aurore**, ce sont des rideaux de lumière qui montent d’un ourlet lumineux vers un ciel sombre, spectaculaires sur un fond noir. **Maillage**, ce sont des éclosions de couleur douces qui se fondent les unes dans les autres, le dégradé moderne par excellence, aimable et polyvalent. [Les dégradés soie](https://gradiently.design/fr/guide/silk-gradient), [les dégradés aurore](https://gradiently.design/fr/guide/aurora-gradients) et [les dégradés maillés](https://gradiently.design/fr/guide/mesh-gradients) ont chacun leur guide avec du CSS.

### Grain, papier et impression

La famille Grain donne à un écran l’air d’un imprimé. **Fibre** est un papier fait main aux longues fibres parsemé de quelques points, **Riso** une impression à deux encres, **Pellicule** du grain argentique, **Tramage** une couleur en paliers de pixels. Elles conviennent à l’alimentation, à l’artisanat, aux livres et à tout ce qui doit sembler fait à la main. Elles masquent aussi le banding, ces bandes qui apparaissent dans les dégradés lisses, comme l’expliquent [les dégradés granuleux](https://gradiently.design/fr/guide/grainy-gradients).

## Comment les couches s’empilent

Un Mark a une couche de base et jusqu’à deux autres par-dessus. Chaque couche supérieure a sa propre opacité et un mode de fusion (normal, superposition claire, produit, incrustation ou doux), comme les calques d’un logiciel de retouche photo. Une recette courante associe une base large comme Maillage ou Brume pour le champ de couleur, une couche structurelle comme Lin ou Trame pour la texture, et une couche de lumière comme Halo ou Fuite pour attirer le regard.

```css
.card {
  background:
    /* top layer: a light, screened over the rest */
    radial-gradient(circle at 75% 20%, rgb(255 214 170 / 0.55) 0%, transparent 40%),
    /* middle layer: a fine stripe for texture */
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.05) 0 2px, transparent 2px 6px),
    /* base layer: the colour field */
    linear-gradient(160deg, #1b2a3a 0%, #2f5d62 60%, #5e8b7e 100%);
  background-blend-mode: screen, overlay, normal;
}
```

Trois couches empilées en CSS, la plus haute en premier : la même structure de base, de texture et de lumière qu’utilise un Mark, sous sa forme la plus simple.

## Lumière, grain et mouvement

Dans chaque couche, quelques réglages changent le comportement de la matière : son échelle, sa déformation, la finesse de ses détails, l’intensité de son éclairage, la quantité de grain qu’elle porte et son mouvement. La même Soie peut être un miroitement serré et lumineux ou un drapé large et sombre. Le mouvement est commun à tout le Mark, avec sa propre vitesse et sa dérive, pour que les couches bougent ensemble plutôt que les unes contre les autres.

Un design portrait calme avec un dégradé doux et large et un seul mot, Calme

Un Mark calme : une structure large et une lumière douce laissent beaucoup de place aux mots.

Un design portrait vif avec une texture détaillée et lumineuse et un seul mot, Éclatant

Un Mark plus vif : un détail plus fin et une lumière plus forte conviennent aux lancements et aux événements.

Le détail et les mots se font concurrence, c’est pourquoi les Marks apaisent d’eux-mêmes les détails chargés près du texte. Un Mark sait où sont les mots : sa zone la plus calme se place derrière le texte et les couleurs proches des lettres s’assombrissent ou s’éclaircissent, si bien que même une matière texturée garde votre titre lisible.

## Comment choisir une matière

### Calme, pour tous les jours

- Maillage, Brume, Limon, Lin, Fibre
- Formes larges, peu de détail
- Facile derrière de longs titres
- Idéal pour les posts quotidiens et les menus

### Frappant, pour les grandes occasions

- Aurore, Néon, Chrome, Parasites, Film holographique
- Lumière forte, structure fine
- Au mieux avec très peu de mots
- Idéal pour les lancements, événements, couvertures

Demandez-vous de quoi votre marque est faite. Une boulangerie, c’est de la farine, du papier et une lumière chaude : Fibre ou Lavis. Un studio qui vend du logiciel, c’est du verre et une lumière nette : Dépoli ou Prisme. Demandez-vous ensuite à quelle fréquence vous publierez dessus : plus c’est souvent, plus il doit être calme. [Comment choisir le bon Mark](https://gradiently.design/fr/guide/pick-the-right-mark) détaille le reste de la décision, et le Marché permet de filtrer directement par matière.

## FAQ

### Qu’est-ce qu’une matière de dégradé ?

La structure que remplissent les couleurs d’un dégradé, comme un lustre, une lueur, un tissage ou une pierre. Elle décide si la couleur se lit comme de la soie, du verre, du papier ou de la lumière.

### Combien de couches un Mark peut-il avoir ?

Jusqu’à trois : une couche de base et jusqu’à deux autres par-dessus, chacune avec sa propre opacité et son mode de fusion.

### Quelle différence entre soie et aurore ?

Soie est un lustre directionnel sur des fils fins. Aurore, ce sont des rideaux de lumière qui montent d’un bord lumineux vers un ciel sombre.

### Le grain rend-il le texte moins lisible ?

Un peu de grain le fait rarement, et il masque le banding. Les Marks apaisent aussi les détails chargés derrière les mots, pour que le texte reste lisible.

### Peut-on chercher sur le Marché par matière ?

Oui. Le Marché se filtre par matière, mais aussi par couleur, fond, ambiance et style, et se fouille avec des mots comme « soie bleue ».