Noise and grain texture generator

Create a film grain overlay with SVG noise: tune frequency, octaves, opacity and blend mode, preview on a gradient and copy tiny CSS or download the SVG.

Grain, not banding

Frequency0.80

Octaves3

Opacity22%

Blend

Noise

CSScss

.grain {
  position: relative;
  isolation: isolate;
}
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'240'%20height%3D'240'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.8'%20numOctaves%3D'3'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'saturate'%20values%3D'0'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23n)'%2F%3E%3C%2Fsvg%3E");
  opacity: 0.22;
  mix-blend-mode: overlay;
}

How to use it

1Adjust frequency for grain size and octaves for detail.
2Set opacity and a blend mode that suits your background.
3Copy the CSS or download the SVG tile.

How the grain is made

The texture is an SVG filter: feTurbulence generates Perlin noise and feColorMatrix removes its color, leaving gray grain. The SVG is inlined as a data URI, so there is no image to download, and stitchTiles makes it repeat seamlessly.

Laid over a gradient with mix-blend-mode: overlay or soft-light at 10 to 25 percent opacity, grain adds tactile depth and hides gradient banding. MiniDev UI's paper material uses the same technique for its warm stock texture.

css

.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,...");
  opacity: 0.2;
  mix-blend-mode: overlay;
}

Frequently asked questions

Does an SVG noise overlay affect performance?

The filter is rasterized once per tile, so a static grain overlay is cheap. Avoid animating it on large areas.

Which blend mode should I use?

Overlay and soft light keep colors intact on mid tones. Use multiply on light backgrounds for darker grain and screen on dark ones for lighter grain.

Can I use it without JavaScript?

Yes. The output is plain CSS with an inline SVG, so it works in any site.