EspañolGrainy noise texture generator for backgrounds
Adjust the grain and see it over the background. The SVG uses the feTurbulence filter and weighs only a few bytes; the PNG is a small tile that repeats without a visible seam.
How to useFilm grain for backgrounds
Available in: 
Grainy noise texture generator for backgrounds: what it is for
A light layer of grain gives flat backgrounds and gradients a paper or film look and also hides the bands that appear in smooth gradients.
Adjust the grain size, detail, opacity and blend mode and see the result over a test gradient. Copy the CSS with SVG noise (feTurbulence filter, a few bytes and seamless) applied to a pseudo-element, or download a 128, 256 or 512 px PNG to tile in the background.
How to use
- Adjust the grain, opacity and blend.
- Test it over your background colors.
- Copy the CSS or download the PNG.
When to use it
- Hero background with a gradient.
- Cards with a paper texture.
- Retro or film look.
Frequently asked questions
What is grain for?
A light layer of noise takes away the plastic look of flat backgrounds and gradients, makes the design feel more organic and also hides the bands that appear in smooth gradients (banding).
SVG or PNG?
The SVG with feTurbulence weighs a few bytes and scales to any size, but it's drawn by the browser and can be heavy on large animated screens. The PNG is a small repeated tile, light to draw. For a fixed background, both work well.
How much grain should I use?
Not much. An opacity between 5% and 15% gives texture without making the page look dirty; above that the background starts to look like a noisy photo and makes the text on top harder to read.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.