Noise texture generator
Make a small tile of random noise that repeats without visible seams. Use it as a grain overlay on gradients and photos, or as a subtle paper-like background. The texture is drawn in your browser, downloaded as a PNG or copied as CSS.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Choose the tile size and the grain size; 1 px is the finest grain.
- Set the intensity and the base colour, or tick transparent background for an overlay.
- Untick grey noise for coloured specks, and press New noise for a different pattern.
- Download the PNG or copy the CSS.
How it works
The tile is split into square cells the size of the grain. Each cell gets a random brightness from 0 to 255, or three random values for red, green and blue with colour noise. That value is mixed with the base colour by the intensity, or written with the intensity as alpha on a transparent background. The random numbers come from a seeded generator, so the preview and the file are identical.
Example
With a base of #7f8c8d (red 127) and intensity 25 %, a cell whose random value is 255 gets red 127 × 0.75 + 255 × 0.25 = 159, and one with value 0 gets 95. The whole tile varies within that band around the base colour.
Tips
- 15–30 % intensity is enough for a subtle grain; higher values look like an old TV.
- A grain size of 2 px reads better on high-density screens, where 1 px noise can look like a flat tint.
- Grain over large gradients hides the visible colour bands they sometimes show.
Frequently asked questions
Why is the texture seamless?
Every cell of the noise is random and independent of its neighbours, so the right edge of the tile does not need to match the left one. When the tile repeats, the joins look like any other part of the noise.
How do I use it as a grain overlay?
Turn on transparent background and download the PNG, then put it in an extra background layer or a pseudo-element over a gradient or photo. With a transparent tile the noise darkens and lightens what is underneath.
What does intensity do?
It is the share of noise in each pixel. Over a base colour, each pixel is base × (1 − intensity) + noise × intensity; on a transparent background, the noise pixels get intensity as their opacity.
What does Copy CSS give me?
A background-image rule with the PNG embedded as a data URL, so it needs no separate file. Larger tiles make long data URLs; for 256 px and above, a downloaded file is usually the better choice.