Grain and noise texture generator

How to use the grain and noise texture generator

1. Choose a background. Pick two colours and an angle for the gradient underneath. Grain is most noticeable on smooth gradients and large flat areas.
2. Adjust the grain. Grain size sets how fine the speckles are; detail adds finer layers of noise. Strength controls how visible it is.
3. Pick a blend mode. Overlay and soft light keep the colours rich and add texture in both the highlights and shadows. Multiply darkens; screen lightens.
4. Copy the CSS or download a tile. The CSS adds the grain as a layer on a pseudo-element, so your content stays sharp on top. Prefer an image? Download a seamless PNG tile instead.

Why add grain?

Large gradients on screens can look plasticky, and on some displays they show visible stepped bands of colour. A little noise breaks up those bands, adds depth and gives designs the tactile quality of print or film. It’s become a signature of modern landing pages and brand illustrations.

How the CSS works

SVG’s feTurbulence filter generates noise mathematically. Wrapped in a data URI, it becomes a background image only a few hundred bytes long that the browser renders at any resolution. Placing it on a ::after pseudo-element with mix-blend-mode blends it into whatever is underneath without affecting text or other content.

Performance

The noise is rendered once per tile and then cached, so it’s cheap for static backgrounds. Avoid animating it over large areas, which forces the browser to redraw it constantly, and test on low-powered phones if you layer it on many elements.

Frequently asked questions