Grainy gradient generator
Grain is fine random noise laid over a gradient. It hides banding and makes smooth colour look printed rather than digital. This one starts on a sunset radial gradient with the grain turned well up.
Free, no sign-up. Runs in your browser. Nothing you type or upload is sent to us or stored.
At a glance
- How the CSS grain is made
- A tiny inline SVG using the feTurbulence filter, which makes noise with the Perlin turbulence function, so there's no image file
- Source: developer.mozilla.org, checked 2026-11
- Where the grain sits
- It's the first background layer, and the first layer is drawn on top
- Source: developer.mozilla.org, checked 2026-11
- Radial gradient shape
- An ellipse here; a radial gradient can end in a circle or an ellipse
- Source: developer.mozilla.org, checked 2026-11
- Grain range
- 0 (off) to 0.3
Want a page that already looks finished?
A free Liite page comes with 15 themes, from soft sunset tones to plain black and white, plus gradient and pattern wallpapers of your own. Pick one, add your links, and your page is live at liite.co/yourname.
Grainy gradient generator: what to know
This page starts the background generator for this case. For every option and how to use it, see the background generator.
Why grain helps a gradient
A smooth gradient across a large screen sometimes shows visible steps of colour, called banding. It's most obvious in dark gradients and in slow blends between two similar colours. A little noise breaks up the edges of those steps, so your eye reads a smooth fade.
Grain also changes the mood. At 0.05 it's barely there and just softens the colour. At 0.2 and above the image starts to look like risograph print or film, which is the style most people mean by a grainy gradient.
A texture background without an image
Grain is the texture this tool makes. For a bolder texture, pick Pattern and use a small dot or grid tile in a colour close to the background, then add grain on top. You still get one CSS declaration and no image file to host.
Questions
How do I make a textured background?
Turn up the Grain slider on any gradient for a fine noise texture, or choose Pattern for dots, a grid, stripes or checks. Copy the CSS or download a PNG.
Does the grain look the same in the CSS and the PNG?
Close, but not pixel for pixel. The CSS uses an SVG noise filter, while the PNG draws random noise in your browser, fresh for each download. Both give the same fine, even grain.