CSS

CSS Noise Background Generator

A grainy noise texture from SVG turbulence -- no image file needed. Frequency, octaves, seed, monochrome vs colour, tile size, blend mode, presets, randomize, and export to CSS, Tailwind, SCSS or React.

What this tool does

Builds a grainy noise texture using SVG's feTurbulence filter and encodes it straight into a background-image data URI — a real noise texture with no PNG file to generate, host, or keep in sync with a colour scheme.

How the noise is generated

Two turbulence types are available: fractal noise for a softer, cloud-like grain, or turbulence for a sharper, more static-like texture. Frequency (X and Y independently, or linked), octaves (how many noise layers are combined for detail), and a seed (for reproducing or varying the exact pattern) all shape the final texture, the same parameters SVG's actual filter primitive exposes.

Colour, opacity and blending

Monochrome desaturates the noise to pure grain; turning it off keeps the raw colour channels of the turbulence for a more chromatic, glitchy look. Opacity and tile size control intensity and grain scale, and a blend mode (overlay, multiply, screen, soft-light, normal) determines how the noise interacts with the background colour underneath.

Presets and randomizing

Six presets cover common uses — Film Grain, Paper Texture, TV Static, Subtle Grain, Frosted Noise, and Colorful Static — plus a randomize button for quick exploration of the parameter space.

Getting the CSS out

Export as plain CSS, a Tailwind arbitrary-value class string, SCSS, or a React inline style object, copyable with one click.

Privacy

Everything runs locally in your browser -- nothing you build is sent to a server.

FAQ

Frequently asked questions

Is my data uploaded anywhere?

No. The noise texture is generated and rendered entirely in the browser -- nothing is sent to a server.

Does this need an actual image file for the texture?

No -- the noise is built from SVG's feTurbulence filter and encoded directly into a background-image data URI, so there's no PNG or JPG to generate, host, or update.

What's the difference between fractal noise and turbulence?

Fractal noise produces a softer, cloud-like grain, while turbulence produces a sharper, more static-like texture -- both are real SVG feTurbulence types, not a visual approximation.

What does the seed control do?

It changes the exact noise pattern generated for the same frequency and octave settings -- useful for getting a different-looking grain without changing how coarse or fine it is.

Can the noise be coloured instead of grey?

Yes -- turning off monochrome keeps the turbulence filter's raw colour channels for a more chromatic, glitchy look instead of desaturating it to pure grain.

What export formats are available?

Plain CSS, a Tailwind arbitrary-value class string, SCSS, or a React inline style object -- selectable from a dropdown next to the code output.