Générateur de texture granuleuse (noise) pour arrière-plans
Réglez le grain et voyez-le sur le fond. Le SVG utilise le filtre feTurbulence et ne pèse que quelques octets ; le PNG est un petit bloc qui se répète sans raccord visible.
Mode d’emploiGrain de pellicule pour arrière-plans
Disponible en: 
Générateur de texture granuleuse (noise) pour arrière-plans: à quoi ça sert
Une fine couche de grain donne aux fonds unis et aux dégradés un aspect papier ou pellicule, et masque en plus les bandes qui apparaissent dans les dégradés doux.
Réglez la taille du grain, le détail, l’opacité et le mode de fusion, et voyez le résultat sur un dégradé de test. Copiez le CSS avec le bruit en SVG (filtre feTurbulence, très léger et sans raccord) appliqué à un pseudo-élément, ou téléchargez un PNG de 128, 256 ou 512 px à répéter en arrière-plan.
Mode d’emploi
- Réglez le grain, l’opacité et la fusion.
- Testez sur les couleurs de votre fond.
- Copiez le CSS ou téléchargez le PNG.
Quand l’utiliser
- Fond de hero avec dégradé.
- Cartes avec texture papier.
- Style rétro ou pellicule.
Questions fréquentes
À quoi sert le grain ?
Une fine couche de bruit enlève l’aspect plastique des fonds unis et des dégradés, rend le rendu plus organique et masque en plus les bandes qui apparaissent dans les dégradés doux (banding).
SVG ou PNG ?
Le SVG avec feTurbulence ne pèse que quelques octets et s’adapte à toutes les tailles, mais il est dessiné par le navigateur et peut être lourd sur de grands écrans animés. Le PNG est un petit bloc répété, léger à afficher. Pour un fond fixe, les deux fonctionnent bien.
Quelle quantité de grain utiliser ?
Peu. Une opacité entre 5 % et 15 % donne de la texture sans salir la page ; au-delà, le fond ressemble à une photo bruitée et gêne la lecture du texte placé dessus.
Vraiment gratuit ?
Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.