Noise Texture

Pro

SVG-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.

Pro component

Join the waitlist to unlock all 14 components at launch.

Join the Pro waitlistor join free for 5 components at launch
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.