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

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.

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

Chaque générateur de dégradés 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.

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.

.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 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.

.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 */
}

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.

• 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.
• 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 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 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.

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é.