Noise/Grain Texture
Texture grain cinématographique en CSS pur — un pseudo-élément ::after incruste un bruit SVG feTurbulence sur n'importe quelle surface, sans JS ni canvas.
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 ::after positionné en inset: 0 sur le conteneur. Ce pseudo-élément reçoit un background-image pointant vers un filtre SVG encodé en data URI : ni canvas, ni image serveur, ni JS — une seule règle CSS suffit.
L'URI embarque un <filter> SVG avec une primitive <feTurbulence> en mode fractalNoise. Le paramètre baseFrequency='0.65' fixe la granularité (densité proche du grain 35 mm) et numOctaves='3' superpose trois niveaux de détail fractals pour un rendu organique plutôt que mécanique. Un <rect> couvre 100 % du viewport SVG avec ce filtre appliqué.
stitchTiles='stitch' demande au moteur SVG de raccorder les bords de la tuile : le bruit se répète de façon invisible, quelle que soit la taille du conteneur. L'opacity à 0.15 rend le grain très discret — il s'ajoute à la couleur de fond #1a1a2e sans l'écraser. pointer-events: none laisse tous les clics traverser le pseudo-élément.
Aucun JS n'est impliqué, aucun requestAnimationFrame ne tourne — le grain est statique, calculé une seule fois par le moteur de rendu. Le coût CPU après le premier paint est nul. L'effet est compatible avec n'importe quel contenu HTML positionné par-dessus (z-index supérieur).
Accessibilité
- Pas de prefers-reduced-motion à gérer : l'effet est entièrement statique, aucune animation ne tourne.
- Le pseudo-élément
::afterest invisible aux technologies d'assistance par nature — les lecteurs d'écran ne traversent pas les pseudo-éléments CSS. pointer-events: noneest posé sur le calque de grain : aucune interaction n'est capturée, les éléments cliquables sous-jacents fonctionnent normalement.- Le texte de démonstration (
.bg-label, blanc#fff) sur fond#1a1a2edépasse le ratio de contraste WCAG AA (4,5:1). - L'effet est purement décoratif ; si le conteneur ne porte aucun contenu textuel, ajoutez
aria-hidden="true"pour l'exclure explicitement de l'arbre d'accessibilité.
Compatibilité navigateur
Nécessite le support des filtres SVG feTurbulence et des data URI en background-image — disponibles dans tous les navigateurs modernes.
Si le navigateur ne supporte pas les filtres SVG en data URI, le <code>::after</code> n'affiche aucune texture — le fond reste <code>#1a1a2e</code>, aucune erreur JS, la page reste fonctionnelle.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="bg-noise-new" style="width:100%;min-height:300px;">
<!-- Contenu par-dessus la texture (le conteneur doit être en position relative) -->
<span class="bg-label">Votre texte</span>
</div>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) | 0.65 | Granularité du bruit : 0,3 = grain épais (grande pellicule), 0,65 = 35 mm, 0,9 = grain très fin / poussière. Modifiez la valeur dans l'URI SVG encodée. |
| numOctaves (SVG) | 3 | Niveaux de détail fractals. 1 = texture plate et uniforme, 4-5 = très organique. Valeurs utiles : 2 (léger), 3 (défaut), 4 (riche). |
| .bg-noise-new::after { opacity } | 0.15 | Intensité visible du grain. 0,08 = hint subtil, 0,20 = grain visible, 0,35 = texture pelliculaire marquée. |
| .bg-noise-new { background } | #1a1a2e | Couleur de surface sous le grain. Changez-la sans toucher au pseudo-élément — le grain s'applique par-dessus n'importe quel fond ou dégradé. |
| type (SVG feTurbulence) | fractalNoise | Mode du bruit SVG. fractalNoise = grain argentique doux. turbulence = motif nuageux plus contrasté, effet horreur ou brutalisme. |
| viewBox SVG (200 200) | 200 200 | Taille de la tuile de base avant répétition. Réduire à 100 100 double la taille apparente du grain ; augmenter à 400 400 l'affine davantage. |
FAQ
feTurbulence génère un bruit déterministe calculé une seule fois par le moteur SVG — aucun requestAnimationFrame, aucun JS ne tourne. Le grain ne change pas entre deux frames, ce qui lui donne un côté photo argentique plutôt que TV-noise..bg-noise-new { background } avec n'importe quelle couleur ou un linear-gradient. Pour un fond clair, réduisez opacity à 0,06–0,10 et envisagez d'ajouter mix-blend-mode: multiply sur le ::after pour un rendu plus naturel sur fond blanc.stitchTiles='stitch' dans la primitive SVG. Le moteur calcule le bruit de façon à ce que les bords de la tuile se raccordent — la répétition est imperceptible même sur une bannière plein écran.
