How does this generate noise without an image file?

It builds an inline SVG using the feTurbulence filter primitive, which procedurally generates fractal noise, then encodes that SVG as a data: URI and uses it as a CSS background-image. There's no PNG or JPG to download — the texture is generated by the browser itself.

Why use background-blend-mode instead of just layering the noise on top?

background-blend-mode mixes the noise image with the base background-color in a single element, so the grain naturally tints to match your color instead of sitting on top as a separate flat layer. Overlay and Soft Light are the most common choices because they preserve the underlying color's brightness range.

Will this hurt page performance?

No — the noise is a small inline data URI with no extra HTTP request, and feTurbulence is a well-optimized native SVG filter. It's noticeably lighter than shipping a tiled grain PNG, though very large grain areas on low-end devices can add a small rendering cost.

Can I make the noise more or less colorful?

Toggle "Monochrome grain" off to let the turbulence keep its raw RGB channels instead of desaturating them, which gives a slightly more colorful, static-like texture rather than pure grayscale grain.

Does this tool upload my settings anywhere?

No — the SVG and CSS are generated locally in your browser as you adjust the controls. Nothing is sent to a server.

CSS NOISE BACKGROUND GENERATOR

Build a film-grain texture from a pure-SVG filter, then copy the CSS.

Base color

Blend mode

Grain size: 0.80

Grain strength: 35%

Monochrome grain

.noise-bg {
  background-color: #201d19;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.8%22%20numOctaves%3D%222%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%22linear%22%20slope%3D%220.35%22%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23n)%22%2F%3E%3C%2Fsvg%3E");
  background-blend-mode: overlay;
}

How to add a noise texture to a background

1
Pick a base background color.
2
Adjust grain size to make the noise coarser or finer.
3
Adjust grain strength to control how visible the texture is.
4
Choose a blend mode — Overlay and Soft Light usually look most natural.
5
Copy the generated CSS and paste it into your stylesheet.

Questions

How does this generate noise without an image file?: It builds an inline SVG using the feTurbulence filter primitive, which procedurally generates fractal noise, then encodes that SVG as a data: URI and uses it as a CSS background-image. There's no PNG or JPG to download — the texture is generated by the browser itself.
Why use background-blend-mode instead of just layering the noise on top?: background-blend-mode mixes the noise image with the base background-color in a single element, so the grain naturally tints to match your color instead of sitting on top as a separate flat layer. Overlay and Soft Light are the most common choices because they preserve the underlying color's brightness range.
Will this hurt page performance?: No — the noise is a small inline data URI with no extra HTTP request, and feTurbulence is a well-optimized native SVG filter. It's noticeably lighter than shipping a tiled grain PNG, though very large grain areas on low-end devices can add a small rendering cost.
Can I make the noise more or less colorful?: Toggle "Monochrome grain" off to let the turbulence keep its raw RGB channels instead of desaturating them, which gives a slightly more colorful, static-like texture rather than pure grayscale grain.
Does this tool upload my settings anywhere?: No — the SVG and CSS are generated locally in your browser as you adjust the controls. Nothing is sent to a server.