JUILLET 2026 · 5 min · OUTILS · ART

Le grain argentique qui manque à vos visuels

Comparaison côte à côte du même visuel avec et sans overlay de grain argentique
Même image. À gauche sans grain, à droite avec le même overlay, appliqué en trente secondes.

Vous connaissez ce rendu : propre, net, et pourtant plat. Une image sortie d'un moteur de rendu ou d'une IA, sans matière, sans âme. Ajoutez du grain et la même image respire : elle a une texture, elle a l'air d'avoir été tournée sur pellicule plutôt que calculée par une machine.

La plupart des designers et des créateurs payent un plugin ou un abonnement juste pour ça. Le grain que vous voyez au-dessus, c'est deux couches de bruit SVG. Zéro plugin, zéro abonnement, et la recette complète est dans cet article.

Obtenir le pack Bruit

12 EUR. La recette déjà exportée en overlays PNG transparents, plusieurs intensités.

C'est quoi, un overlay de grain argentique ?

Un overlay de grain argentique est un calque de bruit posé par-dessus une image pour imiter la texture d'une pellicule photo ou cinéma. Le bon grain n'est pas un scan de pellicule plaqué : c'est du bruit généré, réglable à la source, qui reste net à toutes les tailles d'export.

La recette : deux couches de bruit, pas une texture

Le grain qui tient dans la durée se génère en SVG, avec le filtre feTurbulence en mode fractalNoise. Deux couches superposées, chacune avec son rôle.

Couche principale : tuile de 200 pixels, baseFrequency à 0,82, 3 octaves, opacité 0,85, mode de fusion overlay. C'est elle qui donne la texture visible, le grain qu'on remarque en premier.

Couche fine : tuile de 130 pixels, baseFrequency à 0,95, 2 octaves, opacité 0,12, mode de fusion normal. Son rôle est précis : garder du grain visible jusque dans les zones les plus sombres, là où la couche principale en mode overlay perd son effet.

Gros plan sur la texture de grain feTurbulence appliquée en overlay dans une zone sombre
Zoom sur une zone sombre : la couche fine maintient le grain là où une texture plaquée disparaît.

Le détail que la plupart des tutoriels oublient : passer les deux couches en feColorMatrix avec saturation à zéro. Sans ça, le bruit généré garde des teintes parasites, souvent verdâtres ou violettes selon le moteur de rendu, et le grain a l'air numérique. Grain monochrome, toujours.

Pourquoi un overlay plutôt qu'un plugin ?

Un plugin de grain vend un rendu fixe : quelques presets, un curseur d'intensité, et vous êtes enfermé dans son moteur. L'overlay généré se règle à la source. Vous changez la fréquence, les octaves, l'opacité, et vous passez d'un grain fin de bijouterie à un grain usé de pellicule poussée, sans changer d'outil.

Un exemple concret de ce réglage à la source : sur un fond clair, la couche principale à 0,85 d'opacité écrase le sujet. Je la descends autour de 0,42 et le grain redevient une matière au lieu d'un voile. Ce niveau d'ajustement, un plugin fermé ne vous le laisse pas.

Voir ce grain en action, plein écran

La page Bruit : le theme entier de ce site tourne sur cette recette.

Ce que ça change concrètement

Zéro abonnement pour un effet qui se génère une fois et s'applique partout : sites, visuels sociaux, mockups produits, affiches. La cohérence de marque vient de là. Le même grain sur tout, comme une signature qu'on reconnaît sans savoir la nommer.

La même contrainte, appliquée au mouvement

Une seule courbe d'easing : la logique de signature unique, côté animation.

La recette, déjà prête

J'ai extrait ce grain de mon propre theme et je l'ai exporté en PNG transparents, plusieurs intensités, prêts à poser sur n'importe quel visuel sans toucher à une ligne de SVG. Le pack Bruit, c'est cette recette sans avoir à la reconstruire.

Obtenir le pack Bruit

12 EUR. Overlays PNG transparents, plusieurs intensités, paiement sécurisé via Gumroad.

Pas prêt à payer tout de suite ? Le wallpaper tigre gratuit porte déjà une version de ce grain, en usage réel, sur un visuel complet.

Récupérer le wallpaper gratuit

Gratuit. Le même grain, appliqué à un visuel complet, pour voir avant d'acheter.