Noise Texture
Grain cinématographique en CSS pur — un pseudo-élément, un filtre SVG feTurbulence inline et toute surface gagne une texture grain sans une ligne de JavaScript.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Backgrounds comprend 50 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet repose sur un pseudo-élément CSS (::before ou ::after) positionné en position: absolute; inset: 0 sur le conteneur. Sa propriété background-image reçoit un SVG inline encodé en data URI contenant un filtre <feTurbulence> et un <rect> qui l'applique sur toute la surface — le générateur de bruit est entièrement embarqué dans le CSS, sans requête réseau.
Le primitif feTurbulence utilise type='fractalNoise' (bruit de Perlin lissé, plus organique que turbulence). baseFrequency pilote la densité des grains (0,65 → grain large, 0,9 → grain très fin). numOctaves empile des couches de fréquences (3–4) pour enrichir la texture. stitchTiles='stitch' raccorde les bords de la tuile sans couture visible, même sur de grandes surfaces.
Trois variantes coexistent dans le CSS. .bg-noise utilise ::before (fréquence 0,8 / 4 octaves / opacité 0,15). .bg-noise-new utilise ::after (fréquence 0,65 / 3 octaves / opacité 0,15) — pratique quand ::before est déjà occupé par un autre effet. Ajouter bg-noise directement sur <body> génère un overlay position: fixed qui couvre toute la page (fréquence 0,9 / opacité 0,08 / z-index: 0).
L'effet est entièrement statique — aucun requestAnimationFrame, aucun canvas, aucune ligne de JavaScript. Le rendu est délégué au moteur SVG natif du navigateur. Le pseudo-élément porte pointer-events: none sur .bg-noise-new::after et body.bg-noise::after, ce qui garantit qu'il n'intercepte ni les clics ni le toucher.
Accessibilité
- prefers-reduced-motion : sans objet — l'effet est statique, aucune animation ne tourne. Aucune adaptation de mouvement n'est nécessaire ni présente dans le code.
- Les pseudo-éléments
::before/::aftersont purement décoratifs et invisibles aux lecteurs d'écran ; ils n'émettent aucun nœud dans l'arbre d'accessibilité. - Aucun nouvel élément focusable n'est introduit : le grain n'affecte pas la navigation au clavier.
- Contraste : à
opacity 0.08–0.15, le grain n'altère pas significativement le ratio de contraste du contenu placé par-dessus. Vérifier avec un outil de contraste si l'opacité dépasse 0,25. - Le pseudo-élément porte
pointer-events: none(.bg-noise-new::after,body.bg-noise::after) — les zones cliquables du contenu ne sont pas masquées.
Compatibilité navigateur
Nécessite les pseudo-éléments CSS et les SVG data URI — supportés dans tous les navigateurs modernes depuis plus de dix ans. Zéro dépendance externe.
Si les pseudo-éléments CSS ne sont pas supportés (IE 9 et inférieurs), le fond uni de l'élément s'affiche sans grain — aucune erreur JS, le contenu reste intact.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="bg-noise">
<!-- Contenu au-dessus du grain -->
</div>
<!-- Variante ::after (quand ::before est déjà pris) -->
<div class="bg-noise-new">
<!-- Contenu -->
</div>
<!-- Overlay grain sur toute la page : ajouter la classe sur body -->
<!-- <body class="bg-noise"> -->HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| baseFrequency (SVG, .bg-noise::before) | 0.8 | Densité des grains du pseudo-élément principal. < 0,5 = texture grossière type papier, > 1,0 = grain ultra-fin type pellicule. |
| numOctaves (SVG, .bg-noise::before) | 4 | Couches de bruit empilées. 2 = grain lisse et uniforme, 5 = texture très détaillée (légèrement plus coûteux pour le rendu GPU). |
| opacity (.bg-noise::before) | 0.15 | Intensité visible du grain sur .bg-noise. 0,05 = quasi imperceptible, 0,30 = effet prononcé — ne pas dépasser 0,40 pour conserver la lisibilité. |
| baseFrequency (SVG, .bg-noise-new::after) | 0.65 | Variante .bg-noise-new : fréquence plus basse pour un grain plus large, style papier vintage ou surface brossée. |
| numOctaves (SVG, .bg-noise-new::after) | 3 | Couches de la variante .bg-noise-new. Réduire à 2 pour un grain très lisse, monter à 4 pour plus de détail. |
| opacity (body.bg-noise::after) | 0.08 | Overlay pleine page : très discret par défaut. Monter à 0,12 pour un look cinéma plus marqué — vérifier la lisibilité du contenu. |
| background (.bg-noise / .bg-noise-new) | linear-gradient(135deg,#1a1a2e,#16213e) | Fond visible sous le grain — changez la couleur ou le gradient ; le grain s'applique par-dessus n'importe quelle teinte ou image. |
FAQ
feTurbulence). Vous pouvez l'utiliser dans un email HTML, un générateur de site statique (Astro, Hugo, Eleventy) ou toute UI sans bundler — il suffit de coller le CSS.bg-noise sur <body> pour l'overlay page entière (position: fixed, opacity 0,08), et appliquez .bg-noise ou .bg-noise-new sur vos éléments pour un grain plus intense. Les deux pseudo-éléments fonctionnent de façon indépendante et se combinent sans conflit de sélecteur.stitchTiles='stitch' dans le filtre SVG : le navigateur recalcule les bords de chaque tuile pour qu'ils raccordent sans couture, même sur de très grandes surfaces. La texture est continue quelle que soit la taille du conteneur.
