Noise gradients vs. plain CSS gradients: when to use each
July 9, 2026 · 2 min read
A plain CSS gradient is two or three colors blended along a line. It's fast, it's tiny, and for a lot of buttons and cards it's exactly right. But when designers say a background looks "flat" or "cheap," a plain CSS gradient is often why. Noise gradients solve that — here's when to reach for each.
Plain CSS gradients
A CSS gradient like a simple linear blend is perfect when you want:
- Minimal file size — it's a few lines of CSS, no image to download.
- Crisp scaling — it's resolution-independent by definition.
- Simple UI accents — buttons, badges, dividers, hover states.
The limitation is that the blend is mathematically perfect, so large areas can look sterile and often show visible banding — those stair-step lines between colors, especially on dark gradients and cheaper screens.
Noise gradients
A noise gradient adds subtle, organic variation on top of the color blend. That variation does two useful things:
- It breaks up banding. A little grain scatters the hard edges between color steps so the transition reads as smooth.
- It adds depth. Warped noise makes a gradient feel like a material — mist, glass, ink in water — instead of a flat fill.
The trade-off is that a noise gradient is usually delivered as an exported image (or video), not pure CSS. That's a slightly larger asset, but for a hero or full-page background it's almost always worth it.
A simple rule of thumb
- Small, functional, needs to scale? Use a CSS gradient.
- Large, atmospheric, wants to feel designed? Use a noise gradient and export it.
You can also combine them: a CSS gradient as an instant-loading fallback, with an exported noise gradient layered on top for the finished look.
Want to see the difference? Open the studio, turn warp and grain down to zero for the "plain" look, then bring them back up.