# Texture de dégradé : grain, papier, verre et soie expliqués

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

Deux dégradés aux couleurs identiques peuvent évoquer un photogramme de film, une carte typographique, un écran de téléphone ou une robe de soirée. La différence, c’est la texture, et elle en dit plus que les couleurs.

## The short version

- La texture de dégradé est tout détail de surface posé sur un mélange de couleurs, comme le grain, la fibre du papier, le verre ou un reflet de soie, qui le fait lire comme une matière.
- Chaque famille de textures porte ses propres associations : le grain évoque la pellicule et l’imprimé, le papier l’artisanat, le verre la technologie et la soie le luxe.
- La texture change le caractère d’un dégradé plus que ne le fait un changement de couleur, ce qui en fait l’un des éléments les plus difficiles à copier.
- Les textures peuvent s’empiler, en général une structure comme la soie ou le cannelé, une surface comme le grain ou le papier, et une lumière par-dessus.
- La texture doit laisser la place aux mots : plus légère derrière le texte, plus marquée dans les zones dégagées.

La **texture de dégradé** est la surface que vous posez sur un mélange de couleurs pour qu’il se lise comme une matière plutôt que comme un réglage d’écran par défaut : un grain fin comme la pellicule, le relief du papier, la transparence et la réfraction du verre, ou les plis doux de la soie. Les couleurs disent l’ambiance ; la texture dit de quoi la chose est faite. C’est pourquoi deux dégradés aux couleurs identiques peuvent paraître complètement différents, et pourquoi la texture est l’un des éléments les plus distinctifs d’une identité visuelle.

## Les quatre familles de textures

| Texture | À quoi elle ressemble | Ce qu’elle dit | Convient à |
| --- | --- | --- | --- |
| Grain | Fin moucheté aléatoire sur la couleur | Pellicule, imprimé, chaleur analogique | Éditorial, musique, photographie, la plupart des marques |
| Papier | Fibres douces et relief, base blanc cassé chaude | Artisanat, calme, quelque chose fait à la main | Papeterie, cuisine, livres, studios |
| Verre | Transparence, flou, réfraction, reflets nets | Technologie, précision, profondeur | Applications, logiciels, matériel, finance |
| Soie | Plis lisses avec de doux reflets mouvants | Luxe, douceur, sensualité | Beauté, mode, parfum, bijouterie |

Quatre familles, quatre voix. Choisissez celle qui correspond à la matière dont serait faite votre marque si elle était un objet.

## Le grain : pellicule et imprimé

Le grain est la texture la plus polyvalente et la plus simple à ajouter. Une fine couche de bruit monochrome donne à un mélange l’air d’avoir été photographié ou imprimé, et masque aussi le banding que les dégradés numériques lisses présentent souvent. Il fonctionne avec presque toutes les palettes, ce qui en a fait la touche finale par défaut. La dose et la manière sont détaillées dans [les dégradés granuleux](https://gradiently.design/fr/guide/grainy-gradients).

## Le papier : artisanat et calme

La texture papier apporte une base blanc cassé chaude, des fibres douces et une légère irrégularité, comme si le dégradé avait été imprimé ou peint. Elle s’accorde naturellement aux couleurs pâles, aux encres atténuées et aux caractères à empattements. Gardez de petites touches de couleur et laissez le papier apparaître ; un dégradé pastel ou terreux sur du papier paraît fait main comme ne le fera jamais un fond d’un blanc pur. Voir [les dégradés pastel](https://gradiently.design/fr/guide/pastel-gradients) pour des palettes qui lui vont.

- Papier : éclosion d’abricot: `radial-gradient(circle at 20% 25%, #f3c9a8 0%, #f5ebe0 45%, #efe6da 100%)`
- Soie : satin bordeaux: `linear-gradient(115deg, #5b1733 0%, #9d2a55 22%, #e8a3b8 30%, #9d2a55 40%, #4a0f28 60%, #b8456f 72%, #5b1733 100%)`
- Verre : cannelé: `repeating-linear-gradient(90deg, #0f3d4c 0px, #1f6f86 14px, #8fd3e8 18px, #1f6f86 22px, #0f3d4c 36px)`
- Verre : vitre avec reflet: `linear-gradient(160deg, #0f172a 0%, #1e3a8a 45%, #93c5fd 49%, #1e3a8a 53%, #0f172a 100%)`

Des esquisses de textures avec de simples dégradés CSS. Le satin vient de bandes vives et nettes entre des plis plus sombres ; le verre cannelé de fins reflets répétés ; la vitre d’un seul reflet mince.

## Le verre : technologie et profondeur

Les textures de verre sont de deux sortes. Le verre dépoli floute ce qui se trouve derrière lui, ce qui fonde le [glassmorphisme](https://gradiently.design/fr/guide/glassmorphism). Le verre clair ou cannelé réfracte la couleur en bandes et ajoute des reflets nets là où la lumière accroche une arête. Les deux évoquent la précision et le matériel moderne. Tout tient au reflet : une ligne fine et brillante placée là où la lumière frapperait, et une couleur plus sombre partout ailleurs.

## La soie : luxe et douceur

La soie et le satin ressemblent à de doux plis de tissu : de larges ombres douces, et d’étroits reflets brillants là où l’étoffe se tourne vers la lumière. À l’écran, cela donne un dégradé aux bandes de lumière nettes entre des tons plus profonds, souvent d’une seule teinte. Les couleurs de bijou profondes, comme le bordeaux, l’émeraude et le bleu nuit, se lisent comme une tenue de soirée ; les pâles, comme le champagne et le rose poudré, comme du mariage ou des soins de la peau. La soie est superbe au ralenti, quand les reflets peuvent dériver.

## Comment superposer les textures

Les vraies matières combinent des textures : la soie a un lustre et un tissage, le papier imprimé a des fibres et le grain de l’encre. Les dégradés peuvent en faire autant, à condition que chaque couche ait un rôle clair. Un ordre fiable : la couleur, puis la structure, puis la surface, puis la lumière.

1. **Le champ de couleur** Le mélange lui-même : votre dégradé, votre maillage ou votre lueur. Soignez-le d’abord ; une texture ne rattrape pas une palette boueuse.
2. **La structure** La forme à grande échelle de la matière : plis de soie, cannelures de verre, légère irrégularité du papier. Elle change la façon dont la couleur s’écoule.
3. **La surface** Le détail fin : grain ou relief du papier. Elle recouvre tout et donne à la surface un côté physique.
4. **La lumière** Des reflets et des ombres qui disent à l’œil d’où vient la lumière. Une seule source de lumière cohérente fait lire toutes les couches comme un même objet.

```css
.silk {
  position: relative;
  isolation: isolate;
  /* colour and structure: satin folds in one hue */
  background: linear-gradient(115deg, #5b1733 0%, #9d2a55 22%, #e8a3b8 30%, #9d2a55 40%, #4a0f28 60%, #b8456f 72%, #5b1733 100%);
}

.silk::after {
  /* surface: fine monochrome grain */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  opacity: 0.25;
}
```

Deux couches empilées : une structure de satin dans le dégradé, et une surface de grain fin fondue par-dessus en Lumière douce.

## Texture et lisibilité

La texture ajoute du détail, et le détail derrière de petites lettres les rend plus difficiles à lire. Gardez la texture plus légère derrière le texte et plus marquée dans les zones dégagées, et placez le texte et les logos au-dessus de toutes les couches de texture pour que leurs contours restent nets. Les forts reflets de soie et les reflets de verre sont le plus grand risque, car ils créent des lignes brillantes qui peuvent trancher un mot. Voir [le texte sur des arrière-plans chargés](https://gradiently.design/fr/guide/type-on-busy-backgrounds).

Un post de citation où l’arrière-plan texturé tourne à pleine force derrière les mots

La texture à pleine force derrière les mots : la surface fait concurrence à la phrase.

Le même post de citation avec une zone plus calme de l’arrière-plan texturé derrière les mots

La même matière qui se détend derrière les mots : de la texture là où il y a de l’espace, du calme là où il y a du texte.

## La texture comme identité

Les couleurs s’échantillonnent sur une capture d’écran en quelques secondes. Une texture, et la façon dont elle se comporte avec la lumière et le mouvement, est bien plus difficile à reproduire. C’est ce qui fait de la texture l’un des meilleurs moyens de s’approprier un dégradé. Chaque Mark de Gradiently superpose jusqu’à trois matières à ses couleurs, avec sa propre lumière et son propre grain, et la Forge vous permet de les choisir réglage par réglage.

Un Mark, ce sont des couleurs plus des matières, de la lumière, du grain et du mouvement. Les matières en font un objet.

## FAQ

### Qu’est-ce que la texture de dégradé ?

La texture de dégradé est un détail de surface posé sur un mélange de couleurs, comme le grain, le papier, le verre ou la soie, pour que le dégradé se lise comme une matière.

### Quelle texture utiliser sur un dégradé ?

Accordez la texture à la matière dont serait faite votre marque : le grain pour la pellicule et l’imprimé, le papier pour l’artisanat, le verre pour la technologie, la soie pour le luxe.

### Comment ajouter une texture à un dégradé en CSS ?

Superposez une image de bruit ou de motif au dégradé avec un mode de fusion comme Lumière douce ou Incrustation, à faible opacité.

### Peut-on combiner des textures sur un même dégradé ?

Oui. Empilez-les par rôle : le champ de couleur, puis la structure comme des plis de soie, puis la surface comme le grain, puis la lumière.

### La texture rend-elle le texte plus difficile à lire ?

Elle le peut. Gardez la texture plus légère derrière les mots et placez le texte au-dessus de toutes les couches de texture.