Grainy Gradient
also known asnoise gradient · film-grain background · textured gradient
A smooth color gradient with film-grain noise overlaid to add tactile texture and prevent banding.
A grainy gradient combines two ingredients: a smooth multi-stop gradient (linear, radial, conic, or mesh) and a layer of fine-grain noise — usually an SVG turbulence filter or a tileable noise PNG at 4–10% opacity.
The noise serves two purposes: it adds an analog, photographic texture that feels less 'cheap' than pure digital gradients, and it prevents the visible color banding that smooth gradients exhibit on 8-bit displays.
The look became dominant in 2023–2024 across AI products, editorial sites, and premium SaaS — it's the visual antidote to flat design fatigue.
- Hero backgrounds that need warmth without imagery
- AI / creative tool branding
- Anywhere a flat gradient would feel cheap
- Performance-critical contexts (noise textures add weight)
- Print — grain rarely reproduces well
- +Keep noise opacity between 4–10%
- +Use SVG turbulence for crisp, scalable grain
- +Layer noise above the gradient with mix-blend-mode: overlay or soft-light
- −Don't use noise above 12% — it stops feeling like grain and starts feeling like static
- −Don't grain-texture body text backgrounds — readability suffers
Textbook examples in the directory
Warm grainy aurora applied with restraint — amber bleeds into coral and softens into violet, with real fractal-noise grain layered on top. Inter throughout, generous bone-white surfaces, and the gradient appears in exactly two places: the primary CTA and the featured hero tile. Everything else stays calm so the bloom carries.
A near-black dark canvas where one cosmic grainy gradient does all the talking — deep indigo bleeds into magenta and ignites into warm amber, with real fractal-noise grain layered on top. Inter throughout, hairlines at 8% white, and the gradient burns through the primary CTA, the featured hero tile, and the active chart bar. Quiet space, hot bloom.
A low-sun grainy gradient that runs deep ember to marigold with real fractal-noise grain. Cream surface, Inter Tight display in heavy 800, generous slabs of negative space, and the gradient burns through exactly the primary CTA, the featured tile, and the active chart bar. A warm, restrained bloom — never sunset cliché.
People also ask
How do I add grain to a CSS gradient?
Layer an SVG `<feTurbulence>` filter or a tileable noise PNG above the gradient with `mix-blend-mode: overlay` or `soft-light` and 4–10% opacity.