# Dégradé bruité : une couleur douce avec une finition granuleuse

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

Les dégradés bruités sont faciles à décrire et délicats à réussir. Voici cinq recettes testées, chacune avec ses couleurs, ses réglages de bruit et la raison pour laquelle elle fonctionne, plus ce que fait vraiment chaque curseur de générateur.

## The short version

- Un dégradé bruité est un fondu de couleurs doux recouvert d’une fine couche de bruit aléatoire, qui lui donne une finition imprimée et tactile et masque le banding.
- Les deux réglages les plus importants sont la fréquence du bruit, qui contrôle la taille du grain, et l’opacité, qui contrôle son intensité visible.
- Un bruit fractal à une fréquence entre 0,6 et 0,9, fondu en Incrustation ou Lumière tamisée à 8 à 20 pour cent d’opacité, convient à la plupart des fonds d’écran.
- Les dégradés bruités sombres demandent moins de bruit que les clairs, car le grain se voit surtout dans les ombres et les tons moyens.
- En CSS, le bruit peut être dessiné par un filtre SVG `feTurbulence` intégré, si bien qu’il reste net à toute taille et ne demande aucun fichier image.

Un **dégradé bruité** est un fondu de couleurs doux recouvert d’une fine couche de bruit aléatoire, pour que la couleur paraisse imprimée plutôt que calculée. Le fondu vous donne la couleur et la direction de la lumière ; le bruit vous donne une surface et empêche le fondu de se casser en bandes. Voici cinq recettes à copier, puis une explication simple de chaque réglage de générateur pour créer les vôtres.

## Cinq recettes de dégradé bruité

Chaque recette associe un dégradé de base et un réglage de bruit. Les dégradés sont montrés ici sans bruit pour que vous voyiez la couleur ; le tableau ci-dessous indique le bruit à ajouter par-dessus. Ils sont volontairement différents les uns des autres : un sombre, un clair, un chaud, un froid, un audacieux.

- 1. Violet nocturne: `radial-gradient(circle at 70% 25%, #8b5cf6 0%, #3b1a78 40%, #0e0820 80%)`
- 2. Papier pêche: `radial-gradient(circle at 25% 20%, #ffd9b8 0%, #f6c6c0 40%, #f3ece6 85%)`
- 3. Affiche coucher de soleil: `linear-gradient(160deg, #ff7a3d 0%, #e5486f 50%, #5b2a86 100%)`
- 4. Lagon profond: `radial-gradient(ellipse at 30% 90%, #34d399 0%, #0f766e 40%, #06232a 85%)`
- 5. Bleu limpide: `linear-gradient(135deg, #1e3a8a 0%, #2563eb 45%, #93c5fd 100%)`

Les cinq fondus de base, avant le bruit. Cliquez sur l’un d’eux pour copier son CSS.

| Recette | Fréquence | Fusion | Opacité | Pourquoi |
| --- | --- | --- | --- | --- |
| 1. Violet nocturne | 0,85, 3 octaves | Incrustation | 8 % | Les tons sombres montrent facilement le grain, gardez-le léger |
| 2. Papier pêche | 0,65, 4 octaves | Produit | 10 % | Produit ne fait qu’assombrir, le fond clair reste doux |
| 3. Affiche coucher de soleil | 0,6, 3 octaves | Incrustation | 20 % | Une couleur audacieuse supporte un grain plus fort et plus gros, comme une sérigraphie |
| 4. Lagon profond | 0,9, 2 octaves | Lumière tamisée | 12 % | Un grain fin garde un fondu froid net |
| 5. Bleu limpide | 0,75, 3 octaves | Lumière tamisée | 14 % | Le bleu vers bleu pâle forme des bandes ; le bruit les lisse |

Réglages de bruit pour chaque recette, avec un bruit fractal monochrome. La fréquence et les octaves correspondent directement au filtre SVG du code ci-dessous.

## Les réglages d’un générateur de dégradé bruité expliqués

Chaque [générateur de dégradés](https://gradiently.design/fr/guide/gradient-generator) doté d’une option de bruit, et chaque filtre de bruit SVG, utilise une version des mêmes commandes. Une fois que vous savez ce que fait chacune, vous pouvez lire n’importe quelle recette et corriger n’importe quel résultat.

| Réglage | Ce qu’il change | Bon point de départ |
| --- | --- | --- |
| **Fréquence** (échelle, taille) | La taille du grain. Plus elle est haute, plus il est fin ; plus elle est basse, plus il est gros. | 0,6 à 0,9 pour les écrans |
| **Octaves** (détail) | Les couches de détail dans le bruit. Plus il y en a, plus c’est riche et coûteux à dessiner. | 2 à 4 |
| **Type** | Le bruit fractal est doux et nuageux ; la turbulence est plus nette et striée. | Bruit fractal |
| **Couleur** | Le monochrome garde votre palette exacte ; le bruit coloré ajoute des points façon pellicule. | Monochrome |
| **Mode de fusion** | Comment le bruit se mélange à la couleur. Incrustation ajoute du contraste, Lumière tamisée est plus douce, Produit ne fait qu’assombrir. | Incrustation ou Lumière tamisée |
| **Opacité** (quantité) | L’intensité globale. | 8 à 20 % |
| **Graine** | Le motif aléatoire obtenu. Changez-la si vous voyez un amas qui vous déplaît. | N’importe laquelle |

Les commandes de tout générateur de bruit, en mots simples.

> **Jugez le bruit à la taille finale** Un bruit qui semble juste en zoomant sur un ordinateur disparaît souvent sur un téléphone ou se transforme en bouillie après un envoi. Vérifiez l’export à la taille où on le verra, sur l’écran qui sera utilisé.

## Comment faire un dégradé bruité en CSS

La méthode la plus propre superpose une image de bruit SVG à votre dégradé dans une seule déclaration `background`, puis les fond. Remplacez le dégradé par n’importe quelle recette ci-dessus et réglez la fréquence et l’opacité d’après le tableau.

```css
.noise-gradient {
  position: relative;
  isolation: isolate;
  background: radial-gradient(circle at 70% 25%, #8b5cf6 0%, #3b1a78 40%, #0e0820 80%);
}

.noise-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Recipe 1: frequency 0.85, 3 octaves */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.08;
}
```

La recette 1 en CSS. Le bruit se trouve sur un pseudo-élément sous le contenu, pour que le texte reste net. `stitchTiles` fait se répéter la tuile sans raccord.

### La méthode du moucheté à fort contraste

Pour un rendu plus audacieux, presque risographie, placez le bruit et le dégradé dans la même couche et passez-les dans un filtre de contraste. Le bruit est écrasé en points nets qui suivent la lumière du dégradé. C’est plus voyant que la recette 3 : réservez-le aux affiches et aux bannières d’en-tête, pas derrière un texte courant.

```css
.speckle {
  background:
    linear-gradient(160deg, #ff7a3d 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  filter: contrast(170%) brightness(1000%);
  mix-blend-mode: multiply; /* over a coloured parent, e.g. #5b2a86 */
}
```

Le contraste écrase le bruit doux en points, et la forte luminosité pousse le reste vers le blanc. Le mode Produit pose ensuite le résultat sur un parent coloré. Réglez les deux valeurs du filtre ensemble, et gardez le texte dans une couche séparée au-dessus.

## Choisir le bon bruit selon le format

Le bruit est relatif au canevas. Le même filtre paraît fin sur une story de téléphone et grossier sur une petite bannière : adaptez la fréquence au format plutôt que de réutiliser un seul fichier partout.

Une story verticale de compte à rebours sur un fond dégradé violet granuleux

Une story en 1080×1920 se regarde de près sur un téléphone : gardez un bruit fin et assez léger.

Un large en-tête de site web avec un titre sur un dégradé chaud légèrement granuleux

Un en-tête de site en 1920×1080 remplit un grand écran : baissez l’opacité, car les grandes surfaces rendent le bruit évident.

- **Stories et posts :** fréquence autour de 0,8, opacité de 8 à 14 pour cent. Un peu plus que vous ne le pensez, car les envois l’adoucissent.
- **En-têtes de site web :** fréquence de 0,7 à 0,9, opacité de 4 à 10 pour cent. Voyez [les fonds d’en-tête de site web](https://gradiently.design/fr/guide/website-hero-background).
- **Affiches imprimées :** grain plus gros, fréquence de 0,5 à 0,7 à la taille finale en pixels, pour qu’il survive à l’impression.
- **Fonds sombres :** divisez votre dose habituelle par deux. [Les fonds en dégradé sombre](https://gradiently.design/fr/guide/dark-gradient-backgrounds) expliquent pourquoi les ombres montrent le grain en premier.

## Dégradé bruité ou dégradé granuleux

C’est la même idée vue sous un angle différent. On parle de dégradé granuleux pour désigner le rendu, et de dégradé bruité pour la façon de le fabriquer. [Les dégradés granuleux](https://gradiently.design/fr/guide/grainy-gradients) expliquent pourquoi le grain fonctionne et où le placer ; cette page est le livre de recettes. Si vous voulez de la texture sans fondu de couleurs, commencez plutôt par [la texture de grain](https://gradiently.design/fr/guide/textured-background).

Si vous préférez ne toucher à aucun curseur, chaque Mark Gradiently porte son propre réglage de grain aux côtés de ses couleurs, de sa lumière et de son mouvement, rendu à neuf à chaque taille pour que le bruit ne s’étire ni ne se floute jamais. Créez gratuitement avec n’importe quel Mark non réservé.

## FAQ

### Qu’est-ce qu’un dégradé bruité ?

Un fondu de couleurs doux recouvert d’une fine couche de bruit aléatoire. Le bruit lui donne une finition imprimée et masque le banding.

### Quels réglages de bruit utiliser pour un dégradé ?

Un bruit fractal monochrome, une fréquence de 0,6 à 0,9 et 2 à 4 octaves, fondu en Incrustation ou Lumière tamisée à environ 8 à 20 pour cent d’opacité.

### Comment ajouter du bruit à un dégradé en CSS ?

Superposez au dégradé un SVG intégré doté d’un filtre `feTurbulence`, sur un pseudo-élément, et réglez `mix-blend-mode: overlay` avec une faible opacité.

### Pourquoi mon dégradé bruité paraît-il flou après l’envoi ?

Les plateformes recompressent les images et lissent les détails fins. Exportez à la taille exacte de la plateforme en PNG ou en JPEG de haute qualité, et mettez un peu plus de bruit pour les posts sociaux.

### Un dégradé bruité est-il la même chose qu’un dégradé granuleux ?

Oui, en pratique. Granuleux décrit le rendu, bruité décrit la méthode utilisée pour l’obtenir.