CSS Gradients Explained: linear, radial, conic, and the Patterns That Actually Look Good

A gradient is the CSS feature everyone pastes and nobody understands. You write background: linear-gradient(to right, #f00, #00f) and get a red-to-blue bar — and then when you try to make something actually nice, the result is either a muddy smear or a banded mess. The fix is a shift in mental model: a gradient is not a color, it’s a function that paints a smooth transition across a region. Once you see the two inputs — the geometry (where the gradient points) and the stops (which colors appear where) — everything else is a pattern you can build on.

A Gradient Is a Function, Not a Color

linear-gradient(...), radial-gradient(...), and conic-gradient(...) are all image functions. They’re used anywhere an image is — background-image, background, mask-image, even border-image. That’s why you write background-image: linear-gradient(...) and why a gradient coexists with a background color (background: #0a0a0a linear-gradient(...)) — the color shows through wherever the gradient is transparent.

The generic shape is the same for all three:

<function>( <geometry>, <color-stop>, <color-stop>, ... )

Geometry differs per function; the color stops are shared, so learn them once.

linear-gradient: Direction and Color Stops

A linear gradient has a direction and a list of color stops:

background-image: linear-gradient(45deg, #ff6b6b 0%, #4ecdc4 100%);
background-image: linear-gradient(to right, #ff6b6b, #4ecdc4);

Direction is either a keyword — to top, to right, to bottom right — or an angle like 45deg (measured clockwise from “up”).
Each stop is a color and an optional position. Omit positions and the browser spaces the stops evenly; give positions (0%, 50%, 120px) and the browser interpolates between them.
Two stops are the common case, but you can have any number. The position list is where the power lives — especially one specific trick:

/* Hard stop: two colors at the same position = a crisp edge, no blending */
background-image: linear-gradient(to right, #f00 0%, #f00 50%, #00f 50%, #00f 100%);

That’s a red half and a blue half with a razor-sharp boundary. Hard stops are the building block of every pattern below.

Stripes and Checkerboards: Gradients as Textures

Because gradients are images, you can tile them with background-size and repeat them. Stripes fall straight out of a repeating gradient:

background-image: repeating-linear-gradient(
  45deg,
  #f2f2f2 0px, #f2f2f2 12px,
  #d4d4d4 12px, #d4d4d4 24px
);

Read it as: “paint a 24px diagonal tile with two hard-stop stripes, then repeat.” Change the angle and the widths and you get zebra stripes, candy stripes, or progress-bar texture.

A checkerboard is two overlaid gradients (or one gradient with two hard stops tiled):

background-image:
  linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%),
  linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;

Because both layers are semi-transparent, the offset makes alternating squares show the underlying color. This is the exact technique image tools use to show transparency.

radial and conic: Gradients That Radiate

radial-gradient paints outward from a center: radial-gradient(circle at 30% 30%, #ff9, #333). Optional ellipse/circle, a size (closest-side, 100px 80px), and at <position>. The classic uses: a spotlight/glow, a vignette, a subtle inner highlight behind a card.
conic-gradient paints around a point, like a color wheel: conic-gradient(from 0deg, #f00, #0f0, #00f, #f00). Uses: pie charts drawn in pure CSS, color wheels, and the “sunburst” background behind a brand mark.

Both take the same color-stop list, and hard stops work there too — a conic gradient with hard stops at 0%, 33%, 67%, 100% is a four-slice pie.

Transparency: Fades, Masks, and Overlays

The stop color doesn’t have to be opaque. Gradients to transparent are how you fade images, dim overlays, and build masks:

/* Fade an image out toward the bottom so text can sit on top */
background-image: linear-gradient(to top, rgba(0,0,0,0.8), transparent);

/* Mask a photo so its edges melt away */
-webkit-mask-image: linear-gradient(to right, transparent, #000 20%);

The second example uses the gradient as a mask: the photo is revealed fully where the mask is opaque and vanishes where it’s transparent. Because gradients are image functions, they work in mask-image and -webkit-mask-image the same way they work in background-image.

Why Gradients Look Muddy: Four Mistakes

Two too-similar stops. #333 to #444 across a big element reads as dirt, not depth. Either widen the distance between stops or add a mid stop.
Banding. In the middle of a long gradient you sometimes see visible horizontal bands instead of a smooth ramp. It’s worse in low-bit-depth screens; the mitigation is a slight dither — a faint noise overlay — or avoiding gradients that span most of a very large area.
Midpoint in the wrong place. By default the transition midpoint sits halfway between stops. linear-gradient(#000, #fff) gets dark for a long time then jumps to white. Move the midpoint: linear-gradient(#000 0%, #fff 90%) forces the bright end to dominate earlier.
Forgetting transparency is a color. linear-gradient(#000, transparent) and linear-gradient(#000, rgba(0,0,0,0)) are the same thing — but #000 to transparent on a colored page blends through the background, which is usually what you actually want for overlays.

Quick Reference

Gradients are image functions: linear-gradient, radial-gradient, conic-gradient, usable in background-image, mask-image, and more.
Shape: <function>(<geometry>, <color-stop>...). Geometry is direction/angle for linear, shape+size+position for radial, start angle for conic.
Stops are color [position]; omit positions and the browser spaces them evenly.
Two colors at the same position = a hard stop — crisp edges, the basis of stripes and checkerboards.
Tile a gradient with background-size for repeating textures; repeating-linear-gradient bakes the repetition in.
conic-gradient(from 0deg, ...) paints around a point — pies and color wheels in pure CSS.
Fade and mask with gradients to transparent; gradients work as masks, not just backgrounds.
Banding and muddiness are geometry/stops problems, not a reason to avoid gradients.

To build a gradient without hand-calculating stops, the CSS Gradient Generator gives you live linear/radial/conic previews and copies the CSS. Gradients pair naturally with box shadows — a soft radial behind a card plus a layered shadow is half of modern UI’s depth.