Linear, radial or conic?
Linear sweeps color along one direction and is the workhorse — backgrounds, buttons, overlays. Radial blooms outward from the centre, good for spotlights and soft vignettes. Conic rotates around the centre like a color wheel; with hard stops it also makes pie charts and checkerboards in pure CSS.
Stops and smoothness
Each stop is a color pinned to a percentage of the gradient line. Two stops at 0% and 100% blend across the whole distance; pushing them closer together sharpens the transition, and two different colors at the same percentage make a hard edge — that is how striped backgrounds work. Browsers interpolate in sRGB, so some pairs (blue → yellow) pass through grey; adding a stop in the middle with a livelier hue fixes the muddy zone.
Frequently asked questions
Do I need vendor prefixes?
Not anymore. Unprefixed linear-gradient and radial-gradient work in every current browser, and conic-gradient has been universal since 2020.
Does anything get uploaded?
No. The gradient is rendered by your own browser, so the preview is exactly what a page will show.
Something wrong with this tool, or an idea for it? Tell us