Noise Texture Generator
Seamless, tileable noise built on SVG turbulence. Tune the frequency, tint it, and take it as SVG, PNG, or a single line of CSS.
Local onlyEverything on this page — the preview, the randomness, and every file you download — is generated by JavaScript in this tab. Nothing you type, pick, or upload is transmitted, and the page keeps working offline.
Noise is the texture that makes flat digital surfaces feel physical — grain over a gradient, tooth on a dark panel, static in a hero background. This generator builds it with SVG's feTurbulence filter, which has two properties that matter: the output is seamlessly tileable (the stitchTiles flag), and because it's SVG, a full-screen texture costs about one kilobyte instead of a half-megabyte PNG.
Grain overlay mode produces transparent noise you can layer over anything — that's the one to copy as CSS and drop onto an existing background. Tinted fill gives you a solid colored plate with the noise baked in. Frequency controls the grain size (high = fine film grain, low = large clouds), octaves add detail layers, and the seed gives you a different cloud with the same settings.
Questions this tool gets asked
How do I add a grain texture over my background in CSS?
Use Grain overlay mode, tune it, and press Copy CSS. You get a background-image data URI you can add as an extra layer on any element — put it first in a comma-separated background list so it sits above your color or gradient. One line, no image file to host.
Is the noise seamless and tileable?
Yes. The SVG filter is generated with stitchTiles enabled, so the texture tiles in both directions with no visible seams at any size. That's what makes the one-tile CSS export work on full-screen elements.
What's the difference between fractal and turbulence noise?
Fractal noise is smooth and cloud-like — the right pick for film grain and soft texture. Turbulence has hard swirling ridges, closer to marble or smoke. Same controls, different character; try both at low frequency to see the difference clearly.
SVG, PNG, or CSS — which export should I use?
CSS for web backgrounds (smallest and sharpest), SVG if you want the editable source or need it in a design tool, PNG for apps that only take rasters — video editors, slide decks, game engines. The PNG exports at 640×640 from the same tile.
Why does my gradient band, and does noise fix it?
Banding is 8-bit color running out of steps across a long soft gradient. A low-opacity fine grain dithers the steps so the eye can't find the edges. Generate a grain overlay at high frequency and 5–15% opacity and layer it over the gradient.
Does this tool upload anything?
No. The SVG filter is assembled as text in this tab and rendered by your browser. Downloads and the CSS snippet are produced locally; nothing you make here is transmitted anywhere.