The three kinds and what they are for
- Linear — colour moving along a straight line. The default for backgrounds, buttons and overlays.
- Radial — colour spreading from a point. Good for spotlights and soft vignettes.
- Conic — colour sweeping around a centre. This is the one that makes pie charts and colour wheels in pure CSS.
Stops are positions, not just colours
Every stop has a colour and a position in percent. Two stops at the same position produce a hard edge rather than a blend, which is how you get stripes, progress bars and pie segments without any images. Dragging two stops together in the panel above shows it immediately.
The muddy middle
Interpolating between two saturated hues in sRGB passes through a washed-out
grey — most obvious between blue and orange, or purple and green. There are two
honest fixes. Add a third stop in the middle with the colour you actually want
there, which works everywhere. Or interpolate perceptually with
linear-gradient(in oklab, ...), which is cleaner and needs a fallback for
older browsers.
Where they belong
A gradient carries no information, so it should not compete with content. The uses that hold up are structural: a subtle background wash, an overlay that keeps text legible over an image, a state change on a button. A page where every surface has its own gradient reads as noise — which is why this site's own design uses exactly one, behind the hero.
Questions
Why does my two-colour gradient look muddy in the middle?+
Because sRGB interpolation runs the midpoint through a desaturated grey, which is most visible between complementary hues like blue and yellow. The fix is either a third stop at the midpoint in the colour you actually want, or interpolating in a perceptual space with `in oklab` — supported in current browsers but worth a fallback.
Which angle is 0deg?+
In CSS, 0deg points up and the angle increases clockwise, so 90deg runs left to right and 180deg runs top to bottom. This trips people up because the older -webkit- prefixed syntax measured from a different origin. If a gradient comes out mirrored after a refactor, this is usually why.
Can I use a gradient as a border or as text?+
Yes, but not with the plain properties. For text, apply the gradient as a background and add background-clip: text with a transparent colour. For a border, either use border-image or draw the gradient on a wrapper and inset the content. Neither accepts a gradient in border-color directly.
Do gradients cost anything in performance?+
Painting one is cheap and it stays crisp at any size, unlike a background image. The cost appears when a gradient is animated — animating background-position or the stops themselves repaints every frame. Animate transform or opacity on a layer instead.