CSS gradients in practice

Reviewed July 28, 2026

Boltpic

Each guide describes the current Boltpic tools and links to relevant technical references. Results that depend on the image, browser, or device are identified as variable.

A CSS gradient needs no separate background-image download; the browser draws it at render time. It stays sharp across resolutions and can be restyled in code, which makes it useful for hero sections, buttons, chart fills, and readable overlays on photos.

The syntax is small enough to learn in an afternoon. What takes slightly longer is knowing the recipes and the pitfalls, which is what this guide is for.

linear-gradient: the workhorse

background: linear-gradient(135deg, #0066cc, #7a3ce8);

First argument: direction, as an angle (0deg points up, 90deg points right) or a keyword like “to right”. Then the color stops, as many as you want. By default they spread evenly; give any stop a percentage to control the mix — linear-gradient(90deg, #0066cc 30%, #7a3ce8) holds solid blue for the first 30% before blending out.

Hard stops: stripes and split backgrounds

Put two stops at the same position and the blend disappears, leaving a crisp edge. That one trick turns gradients into a pattern generator:

/* two-tone split */
background: linear-gradient(90deg, #1d1d1f 50%, #f5f5f7 50%);

/* diagonal stripes */
background: repeating-linear-gradient(45deg,
  #0066cc 0 12px, #eef4ff 12px 24px);

Radial and conic gradients

radial-gradient expands from a center point and can create a glow or spotlight effect. For example, radial-gradient(circle at 30% 20%, #ffffff33, transparent 60%) adds a soft highlight. conic-gradient sweeps around the center and can draw progress rings, pie charts, or color wheels:

/* a 70% progress ring, no JavaScript */
background: conic-gradient(#0066cc 0 70%, #e0e0e0 70% 100%);
border-radius: 50%;

Three interface examples

The photo overlay. White text straight on a photo is unreadable wherever the photo is light. The standard fix is a gradient scrim — transparent at the top, dark at the bottom, layered under the text but over the image:

background:
  linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.65)),
  url(hero.webp) center / cover;

Gradient text. Clip a gradient to the glyphs themselves:

.headline {
  background: linear-gradient(90deg, #0066cc, #00b3a4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

A subtle button highlight. A small lightness difference from top to bottom can add depth, but it should not replace clear hover, focus, and pressed states. Check the effect with the button label and surrounding contrast.

Banding: the classic gradient bug

A large or dark gradient may show visible stripes instead of a smooth blend. This banding can result from limited color precision, display characteristics, compression, and the browser's rendering path, so it may vary between devices.

Fixes, in order of effort: shorten the distance or move the colors closer together; add an intermediate color stop or route the gradient through a slight hue shift (dark blue → deep purple → black bands far less than dark blue → black); or overlay a barely-visible noise texture, which is how film and games have dithered gradients for decades.

Picking colors that actually blend well

Nearby hues often produce a predictable blend, while distant hues may pass through an unwanted neutral color. Add an intermediate stop to control that path. A photograph can also supply useful candidate colors: sample them with the color picker or palette tool, build the blend, and then check the result in the intended interface.

For motion, support for interpolating between gradient values is not consistent in every setup. Animating background-position on an oversized gradient or crossfading two layered gradients is often more predictable; test performance and reduced-motion behavior in the target browsers.

← All guides