Noise Texture Generator
Generate a grain texture with adjustable density, opacity, and color, then download it or copy it as CSS.
How it works
A canvas of the chosen tile size is filled pixel by pixel: each pixel independently rolls against the density slider to decide whether it gets a grain, then that grain's color alpha is scaled by the opacity slider. Monochrome mode uses one grain color throughout; turning it off randomizes each grain's brightness too, for a more textured, less uniform look. The tiled preview below repeats the same canvas as a CSS background to show how it behaves at scale.
Both outputs, the downloaded PNG and the "copy as CSS" data URI, come directly from this
canvas via toDataURL/toBlob, entirely in your browser. Nothing
is uploaded.
Common questions
Will the downloaded PNG tile seamlessly?
It's random per-pixel noise rather than a repeating pattern, so used as a small repeating background-image it won't have visible seams either, since every pixel is independently random and there's no larger structure to break at the tile edge.
What's the difference between the PNG download and the CSS copy?
Download gives you a real .png file to reference from a stylesheet or <img>. "Copy as CSS" instead embeds the same image as a base64 data URI directly inside a background-image rule, useful for a single self-contained CSS block with no separate file to host.
Is this sent anywhere?
No, the texture is generated pixel by pixel on an in-memory canvas in your browser. Nothing is uploaded.