Noise texture generator — film grain and ripples in SVG

How to use the noise texture generator

1. Pick Noise: Fractal (grain) or Turbulence (ripples).
2. Set Frequency (0.01–2). Low values give large, cloudy shapes; high values give fine grain.
3. Set Detail (octaves) (1–8). Each octave adds a finer layer of noise on top.
4. Adjust Opacity and Background. Tick Colour noise if you want coloured speckles instead of grey.
5. Set Width, Height and Seed, then download noise.svg or copy the CSS.

What it does and when to use it

A light layer of noise makes flat colour look less digital. It is common on poster-style hero sections, behind gradients to hide banding, and on cards that should feel like paper. Turbulence at a low frequency also makes marble or smoke effects for backgrounds.

Pair it with the mesh gradient generator or the gradient generator: a grain at low opacity on top of a smooth blend reduces visible steps between colours. For repeating shapes instead of grain, use the SVG pattern generator.

How it works

The output is an SVG with a filter made of two primitives. feTurbulence creates Perlin noise using your type, baseFrequency, numOctaves and seed. Unless Colour noise is ticked, feColorMatrix with saturate 0 turns it grey. The filter is applied to a full-size rectangle drawn at your Opacity over the Background colour. stitchTiles="stitch" asks the renderer to make the edges match, which helps when the image repeats.

The CSS output puts the same SVG into a background-image data URL, percent-encoded rather than Base64. Because the texture is drawn by the viewer’s software, the tool itself does no image processing. Nothing is uploaded.

Worked examples

Default grain. Fractal, frequency 0.8, 4 octaves, seed 1, opacity 0.35 on #f5f5f4. The filter is <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" seed="1" stitchTiles="stitch"/> followed by <feColorMatrix type="saturate" values="0"/>, so the grain is grey.

Coloured ripples. Turbulence, frequency 0.02, 2 octaves, Colour noise ticked, seed 9. The filter becomes <feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="2" seed="9", with no colour matrix after it, so the large swirls keep their colours.

Limits and tips

• Keep grain subtle: an opacity between about 0.05 and 0.2 usually reads as texture, not dirt.
• Each extra octave adds drawing work. Use the lowest Detail value that still looks right.
• Very large textures can be slow to draw on older phones. A 200–400 px texture repeated with CSS is often enough.
• The filter id is noise plus a short code worked out from the settings, so two different inline noise SVGs on one HTML page do not clash.