OneTaskBy Tim King · Updated
CSS Noise Generator
Film Grain and Noise Texture From an feTurbulence SVG Filter
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the CSS Noise Generator works
This CSS noise generator adds a grain texture to any background. A little grain stops flat colour and smooth gradients from looking like a screen and makes them look
like a surface. This tool builds that grain from an SVG feTurbulence filter embedded as a data URI,
layered over a base colour with a blend mode, so the whole texture ships inside the stylesheet.
CSS noise generator: grain from SVG turbulence
There is no noise function in CSS itself, but SVG has one: feTurbulence generates Perlin noise
procedurally from a handful of numbers. Wrap it in a tiny SVG that fills a rectangle with the filter,
encode that SVG as a data URI, and it becomes a background-image like any other. The browser renders
the noise on the fly and tiles it, so the texture costs a few hundred bytes of CSS rather than a
multi-hundred-kilobyte PNG.
fractalNoise vs turbulence. fractalNoise sums the octaves as signed values and produces the
soft, cloudy grain that looks like film or paper. turbulence takes the absolute value of each octave,
which gives a harder, veined texture closer to marble or smoke. For a subtle background grain,
fractalNoise is almost always what you want.
Frequency sets how fine the noise is. Values around 0.6–1.0 give pixel-scale grain; 0.1–0.3 gives
large soft blotches more like a watercolour wash. Octaves add finer detail on top of the base
frequency — one octave is smooth and blobby, three is a natural grain, six is sharp and a little
noisier to render. The stitchTiles attribute in the generated SVG tells the filter to make the
noise tile seamlessly, which is why you do not see a grid of squares in the preview.
Monochrome runs the noise through a feColorMatrix that removes saturation. Without it, the
turbulence filter produces coloured noise, which can be an interesting effect over a light base but
looks like a broken TV over most colours.
Strength and blend. The noise layer as generated is dense; the tool controls its visibility with
an overlay of the base colour at a complementary opacity, written as a ::after pseudo-element so the
copied rule is self-contained. The blend mode changes how the grain combines with the base colour:
overlay and soft-light brighten and darken around the base, keeping its hue; multiply only
darkens, screen only lightens, and normal shows the grey noise directly. Overlay at 20–40% strength
is the common starting point.
Performance. The filter is rendered once per tile and cached, then tiled like any image, so a static grain is cheap. Do not animate the frequency or seed on every frame — that re-renders the filter continuously and is expensive, especially at high octave counts. If you need animated grain, pre-render a few frames as separate backgrounds and step between them.
Where it works. Every modern browser renders SVG filters in data-URI backgrounds. The one caveat
is background-blend-mode, which is widely supported but ignored in some older embedded webviews,
where you fall back to plain grey noise at the set strength — still acceptable.
FAQ
Why does the grain look different in Safari and Chrome?
The noise function is specified precisely, but rendering, gamma and anti-aliasing differ slightly between engines, so identical values can look marginally softer or harsher. Test in both and adjust strength by a few percent; the tile stitching and overall character are consistent.
Can I use this over a gradient instead of a flat colour?
Yes. Replace the background-color with a gradient in the background-image list, placing the noise
URI first so it sits on top, and keep the blend mode. The mesh gradient tool on this site pairs well
with a noise layer for the popular grainy-gradient look.
Is the data URI safe to paste into CSS?
Yes. The <, > and # characters are percent-encoded, which are the only ones that break inside a
url() in CSS, and the whole value is wrapped in double quotes. It works in stylesheets, inline styles
and CSS-in-JS alike.
Why not just use a noise PNG?
A PNG is fixed in resolution and colour, weighs tens or hundreds of kilobytes for a large tile, and needs a request. The SVG filter is a few hundred bytes, renders at native density on any screen, and can be retuned from the stylesheet. Use a PNG only if you need a specific hand-made texture.
Does the seed matter?
feTurbulence accepts a seed attribute that changes the specific pattern without changing its
character. The generator leaves it at the default; add seed='7' or any integer by hand if you need
two noise layers that do not line up with each other.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
CSS Pattern Generator
Repeating background patterns built from CSS gradients, no images.
Mesh Gradient Generator
Pure-CSS mesh gradients from stacked radial layers.
Gradient Maker
Linear, radial and conic CSS gradients with live preview.
Animated Banner
Design an animated ad banner and export GIF or WebM.
Animated Counter
Make a number count-up animation and copy the code.