Noise & Grain Generator
Generate monochrome, colored or film-grain noise textures at any size, then download the PNG or copy the CSS.
How it works
Pick a size and the noise texture is drawn immediately: every pixel gets a random value from a seeded generator, painted onto an HTML canvas in your own browser. Monochrome grain gives the classic grey speckle, colored noise randomises each RGB channel for a TV-static look, and Gaussian film grain clusters values around mid-grey the way real photographic grain does. Grain size scales the speckles up with nearest-neighbour sampling, so 4 px specks stay crisp instead of turning into blur.
Intensity sets the opacity of the noise layer. Leave “Transparent background” ticked to get a
PNG you can drop on top of an image, hero section or gradient as an overlay; untick it and
choose a color to bake the grain into a solid background tile. The seed makes results
repeatable — note it down and you can regenerate the exact same texture later, or hit
Randomize seed until you like what you see. Download the PNG, or use Copy CSS to get a
ready-made background-image rule with the texture embedded as a base64 data URI,
so your page needs no extra network request. Nothing is uploaded: the generator, the preview
and the download all run locally with JavaScript.
Frequently asked questions
How do I make a noise texture for CSS?
Set the width and height you need, choose a noise type and intensity, leave "Transparent background" ticked, then press Copy CSS. You get a ready-made .noise-overlay rule with the texture embedded as a base64 data URI and background-repeat: repeat, so it tiles across any element without an extra network request. Paste it into your stylesheet and layer it over a gradient, hero image or card.
What is a film grain overlay?
A film grain overlay is a semi-transparent layer of fine random specks placed on top of an image or background to imitate the grain of photographic film. Choose "Gaussian film grain" to cluster the random values around mid-grey the way real film emulsion does — it looks more organic than pure random noise. Keep the background transparent, download the PNG, and stack it above your artwork with a low opacity or an overlay blend mode.
Can I generate a transparent noise PNG?
Yes. "Transparent background (overlay PNG)" is on by default, so the exported PNG contains only the noise pixels with the alpha set by the intensity slider — nothing behind it. Untick it and pick a color if you would rather bake the grain into a solid background tile instead. Either way the PNG is created by your own browser and never uploaded anywhere.