Noise Texture Generator
Create grain textures and grainy gradients for your designs, then export as PNG or copy a ready-made CSS snippet — nothing ever uploads.
Every pixel gets its own random value — classic, high-frequency static.
CSS (SVG noise) — similar look, not pixel-identical to the PNG.
Everything runs locally in your browser. Nothing is uploaded to any server — close the tab and your files are gone.
How to use
Pick noise or gradient
Switch between the Noise texture and Grainy gradient tabs at the top. Both share the same size controls and grain engine, just arranged differently.
Set the size
Use a preset chip or type an exact width and height, from 16 up to 4096 px each. The canvas always renders at the real pixel size you choose — the page just scales it down to fit the preview.
Tune the look
Pick fine or smooth noise and adjust intensity, or for gradients set your colors, angle and grain amount. Every change re-renders live.
Export
Click Regenerate for a different random pattern, then download a PNG at full resolution, or copy a CSS snippet that approximates the same grain with no image file at all.
Frequently asked questions
PNG or CSS snippet — which should I use?
The PNG is a pixel-accurate export of exactly what you see, and works anywhere images do. The CSS snippet uses an SVG feTurbulence filter to approximate a similar grain with zero image weight, which is great for backgrounds on a live site — but it will not match the PNG pixel for pixel, and feTurbulence rendering varies slightly across browsers.
How do I use a transparent grain overlay in Figma or Photoshop?
Turn on Transparent mode, download the PNG, then drop it onto its own layer above your design. Only the alpha channel carries the noise, so you can set that layer’s blend mode — Overlay, Multiply, Screen — and its opacity without touching the layers underneath.
What does baseFrequency actually control in the CSS snippet?
It is the parameter feTurbulence uses to decide how large one “cell” of noise is — higher values pack more, smaller detail into the same area. The snippet estimates it from your chosen noise type and grain size, but SVG turbulence and this tool’s own noise engine are different algorithms, so the mapping is an approximation rather than a formula.
Does the seed actually reproduce the same texture?
Yes. Every texture comes from a seeded random number generator, so as long as the seed and every other setting stay the same, you get pixel-identical noise back. Regenerate just picks a new seed at random — there is no way to type in a specific seed by hand yet.
Why does a large canvas render more slowly?
Noise is computed per pixel on your own device, so a 4096×4096 texture is sixteen times the work of a 1024×1024 one. Sliders stay responsive by rendering a smaller preview while you drag and swapping in the full-resolution version the moment you let go — the PNG you download is always rendered at full size regardless of how the preview looked.
Do fine grain and smooth noise export at the same speed?
No. Fine grain is a single random number per pixel, so it is the faster of the two. Smooth noise blends three octaves of value noise per channel, which costs more — especially in full-color mode, where three separate noise fields are generated instead of one.