The case for CSS gradients

The most common reason a style gets heavier than it needs to be is a tiny gradient image that could have been declared in a single line of CSS. Gradients are generated by the browser at render time: they never block the network, never need a resize step, never go stale, and stay pixel-perfect at any zoom. For backgrounds, separators, and simple product art, CSS gradients are almost always the lighter, more maintainable answer.

When an image is still the right call

Not every effect can be a gradient. Reach for an actual image when you need:

  • Photographic texture, noise, or grain that cannot be described by interpolated color stops.
  • Irregular organic shapes and hand-drawn-looking artwork.
  • Complex multi-point gradients with hard color breaks (though modern CSS handles many of these already).
  • Support for very old browsers with no color-stop tooling.

The common patterns, in pure CSS

Most everyday uses have a one-liner:

  • Linear backgrounds: linear-gradient(135deg, #6366f1, #06b6d4) covers buttons, headers, and banners.
  • Radial highlights: radial-gradient(circle at 50% 40%, ...) creates the soft glows popular behind hero panels.
  • Repetition: repeating-linear-gradient builds stripes, grids, and graph-paper canvases in one declaration.
  • Transparency blends: a gradient fading to transparent is the classic way to smooth a hard image edge into a page.

But they also cost something

Crucially, gradients are not free - they add GPU work. A full-viewport blurred or gradient-rendered background inside a scrolled container can cost frames on low-end mobiles. Keep heavy visual effects on small, contained surfaces, and avoid layering several full-screen gradients when a solid fallback reads just as well.

Contrast and accessibility

Text on top of gradients is where accessibility failures happen. A gradient that goes from dark to light typically makes the middle unreadable for white text. Put text on a solid or lightly blended area, or add a scrim (a dark gradient under the text) to guarantee contrast rather than hoping the average color works.

The practical rule

Ask one question: does this decoration describe points in smooth transition, or does it depend on complex texture? If the former, write CSS. If the latter, use an optimized image - but export it as WebP and resize it to the largest slot it will occupy.