Noise Texture
ProSVG-based noise overlay using feTurbulence filter for film grain and texture effects.
Effects · primitive · basic · none · zero dependencies
noise-texture Effects·preview
Grain makes a gradient look printed
opacity 0.3 · baseFrequency 0.85 · overlay
0.10 subtle
0.35 default
0.60 heavy
Noise Texture
SVG-based noise overlay using feTurbulence filter for film grain and texture effects.
Use it for
- hero background film grain
- dark section banding fix
- premium landing page texture overlay
- photography portfolio background grain
Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional classes for the overlay container. |
opacity | number | 0.3 | Opacity of the noise overlay. |
baseFrequency | number | 0.8 | Base frequency of the turbulence pattern — higher values produce finer grain. |
numOctaves | number | 4 | Number of octaves for fractal noise detail. |
blendMode | "normal" | "multiply" | "screen" | "overlay" | "soft-light" | "hard-light" | "overlay" | CSS mix-blend-mode applied to the overlay. |
FAQ
Does Noise Texture work with Next.js App Router?
Yes. It's a "use client" React component and works unchanged in both the App Router and Pages Router.
Are there any dependencies to install?
None. It's a pure inline SVG filter encoded as a data URI — no external packages required.
Is it responsive?
Yes. It's an absolutely positioned inset-0 overlay that fills its parent at any size, and the grain pattern tiles automatically.
Does it respect prefers-reduced-motion?
There's nothing to disable — the texture is a static filter with no animation, so it's inherently safe for motion-sensitive users.