Noise Grain Background — Free HTML CSS Snippet

Three practical wins and one aesthetic one. No asset: the data URI ships inside the CSS, so there is no texture file to host, version, or lose — the snippet is genuinely copy-paste. No resolution ceiling: a PNG tile blurs on high-DPR screens or when scaled up, while feTurbulence renders sharp at any background-size because the browser rasterises the SVG at display resolution. No requests: PNG textures are render-blocking-adjacent decoration; the data URI costs ~400 bytes inline. Canvas noise (filling ImageData with random values) is the alternative for truly per-frame random grain, but it costs JavaScript, a resize handler, and main-thread work — while this approach is zero-JS and compositor-animated. The aesthetic point: fractalNoise is Perlin-based, so its grain has the slightly clustered, organic distribution of film emulsion rather than the harsh uniform static of raw Math.random() — which is why the same filter at low frequency produces natural-looking blobs and terrain.

Because real grain does not move — it is reborn every frame. Film grain is a fresh random field 24 times a second; if you slide a noise texture smoothly, the eye immediately locks onto the pattern and tracks it, reading "a dirty texture drifting" instead of "living grain". steps(8) removes interpolation entirely: the layer teleports between the keyframe positions, and each teleport presents a visually uncorrelated patch of noise, which at ~11 effective fps convincingly imitates the per-frame rebirth (slightly under film rate, which reads as more textural). The oversizing (inset: -100%) exists because the layer must have somewhere to jump to: translating a container-sized layer by 3% would drag blank space into view at the edges; a 3×3-sized layer can jump anywhere in a ±33% range with the container always fully covered. The translate percentages are of the layer's own (tripled) size, so the demo's ±3% jumps are actually ±9% of the container — enough to decorrelate the visible patch completely.

Kept as shipped, it is one of the cheaper effects in this library: the noise rasterises once per size change (then it is a cached background tile), the jitter animates transform only (compositor-thread, no layout or paint), and there is no JavaScript in the loop. The two costs to watch: mix-blend-mode promotes the blended subtree into its own compositing group — one grain hero is nothing, but a page with six independently-blended grain sections forces the compositor to maintain six groups, so prefer one page-level grain layer over many; and the oversized pseudo-element's memory footprint scales with container area × 9 — on a full-viewport 4K hero that is a large layer, so reduce inset to -50% (with proportionally smaller jumps) if profiling shows memory pressure. Two free optimisations: freeze the animation off-screen with an IntersectionObserver toggling the grain-animated class, and respect the already-included prefers-reduced-motion block, which also saves the compositor work entirely for those users.

Tailwind: the layer maps to after:content-[''] after:absolute after:-inset-full after:pointer-events-none after:mix-blend-overlay after:opacity-[var(--grain-opacity,0.14)] with the data URI as an arbitrary background — after:bg-[url('data:image/svg+xml,…')] works but the URI's commas must be URL-encoded (%2C) to survive Tailwind's arbitrary-value parser, so most teams register it once in the config as backgroundImage: { grain: "url(…)" } and use after:bg-grain; the steps() keyframes go in the config's keyframes/animation blocks. React/Vue/Angular: nothing framework-specific exists here — ship the CSS globally or in a styled/module file and toggle the grain-animated class from state; the slider-to-custom-property wiring becomes style={{ "--grain-opacity": intensity }} on the container. Over existing brand backgrounds: the ::after approach needs position: relative and overflow: hidden on the host and will sit above the host's children unless they carry z-index — the demo's z-index: 1 content wrapper is the pattern; if the host already uses ::after, nest one dedicated grain <div aria-hidden> as the last child with the same inset/blend styles instead.