CSS Noise/Grain Generator

Add subtle film grain and noise textures to your backgrounds.
Pure CSS using SVG filters. No images needed.

Preview

Base Color

Noise Opacity: 30%

0%50%100%

Grain Size

CSS Code

.noise {
  position: relative;
  background: #3b82f6;
}

.noise::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.30;
  pointer-events: none;
}

How It Works

SVG Noise Filter

Uses the SVG feTurbulence filter to generate procedural noise. This creates a seamless texture without any external images.

Pseudo-element Overlay

The noise is applied via a ::before pseudo-element that covers the entire container with inset: 0.

Adjustable Settings

Control the baseFrequency for grain size and opacity for how visible the texture appears.

Or extract any texture effect from the web

See a noise or grain effect you love? Frontend Hero's CSS Scanner extracts it in 2 clicks. Works on any website. No more guessing filter values.

Get Frontend Hero now →

Explore more CSS tools

CSS Blend Mode Generator

Mix colors with blend modes

CSS Grid Generator

Create grid layouts visually

CSS Flexbox Generator

Create flex layouts visually

CSS Gradient Generator

Create custom gradients

CSS Text Gradient

Gradient text effects

CSS Gradients Collection

275+ ready-to-use gradients

CSS Box Shadow Generator

Design multi-layer shadows

CSS Selection Generator

Style text highlight colors

CSS Scrollbar Generator

Style custom scrollbars

CSS Cursor Generator

Preview all cursor styles

CSS Loader Generator

Create loading animations

BTN

CSS Button Generator

Design buttons with hover effects

✨

CSS Glow Generator

Create neon glow effects

Fluid Typography

Scale text across screen sizes

Browse all free CSS tools →