CSS Gradients Explained: Linear, Radial, and Color Stops
How CSS gradients actually work — the angle trap, color stops, radial shapes, and the transition gotcha — with copy-paste code.
Gradients are one of those CSS features that look trivial and then eat an afternoon. You want a soft indigo-to-pink fade behind a hero section, you write linear-gradient(indigo, pink), and it comes out fading top to bottom when you wanted left to right. Now you’re googling angle syntax again.
The CSS Gradient Generator skips that loop — drag a slider, watch the preview, copy the line. But it helps to know what the code is doing underneath, so here’s the short version.
Linear gradients and the angle trap
A linear gradient blends colors along a straight line. linear-gradient(90deg, #6366f1, #ec4899) runs indigo on the left to pink on the right.
The angle is where people trip. It isn’t measured the way you’d guess from geometry class. 0deg points straight up, and the value increases clockwise: 90deg is to the right, 180deg is down, 270deg is left. Leave the angle out entirely and the browser defaults to to bottom, which equals 180deg. That’s why linear-gradient(indigo, pink) fades downward. You never told it otherwise.
You can skip degrees and use keywords instead: to right, to bottom left. They read more clearly, but they behave a little differently on non-square boxes, because to bottom left aims at the actual corner rather than a fixed 225deg. On most layouts you’ll never see the gap.
Color stops do the real work
Every color in a gradient has a position — a percentage from 0% to 100%. Two stops give a plain fade. Add a third at 50% and you get a three-color blend. It gets interesting when you put two stops at the same position:
background: linear-gradient(90deg, #6366f1 50%, #ec4899 50%);No blend. Just a hard line down the middle, indigo on one side, pink on the other. That trick is how people fake two-tone backgrounds and striped patterns without ever loading an image.
Radial gradients
Radial gradients spread out from a center point instead of running along a line. They’re the right pick for glows, spotlights, and the soft circular vignettes you see behind product screenshots.
One default is worth memorizing: if you don’t name a shape, a radial gradient is an ellipse stretched to fit its box, not a circle. Write circle explicitly when you want a true round glow. The generator flips between the two so you can watch the shape change on the spot.
The one that catches everyone
Gradients live in background-image, not background-color. And you can’t smoothly animate one with a plain CSS transition — the browser has nothing to interpolate between two background-image values, so it snaps instead of fading. The usual fix is to stack two gradients and cross-fade their opacity, or animate background-position on an oversized gradient. Good to know before you burn twenty minutes wondering why your hover effect jumps.
Browser support
None of this needs a vendor prefix anymore. linear-gradient() and radial-gradient() have shipped unprefixed in every major browser since roughly 2012. The -webkit- lines you still see in old Stack Overflow answers are dead weight now, safe to delete.
Want gradient text? Set the gradient as background, then add background-clip: text and color: transparent. The tool hands you the gradient itself; that recipe reuses it.
Pick your colors, nudge the angle, grab the line. Open the CSS Gradient Generator and the code updates as you go — nothing to install, nothing uploaded.