Linear vs radial: pick by how the color travels
The two everyday gradient types differ in the shape of the transition:
- Linear — colors travel along a straight line at a given angle.
linear-gradient(180deg, ...)goes top to bottom. The workhorse for backgrounds, buttons, and overlays. - Radial — colors radiate outward from a center point in a circle or ellipse. Ideal for spotlights, glows, and adding depth.
Each is built from color stops — a color plus an optional position. Two stops give a simple fade; many stops give rich multi-color transitions; two stops at one position give a hard edge (see above).
The angle gotcha
CSS gradient angles don’t match design tools. In CSS, 0deg points up and 90deg points right, rotating clockwise. Figma and Photoshop start 0deg at the 3 o’clock position. So the same number renders in a different direction — to port a Figma angle to CSS, use CSS = 90° − Figma. The live preview is the fastest way to just dial in the direction you want without doing the arithmetic.
Interpolate in OKLCH for vivid results
By default CSS blends gradients in sRGB, which isn’t perceptually uniform — a red-to-blue fade sags through a grayish purple. CSS Color 4 lets you choose the interpolation space:
linear-gradient(in oklch, red, blue)Interpolating in oklch (or in hsl) keeps the transition bright and even, passing through a vivid violet instead of mud. Supported in current Chrome, Safari, and Firefox — define your stops here, then add the color-space hint for noticeably richer gradients.
Taming color banding
On large gradients across similar tones (especially dark ones), 8-bit color depth produces visible stepped bands. Three fixes: add more intermediate color stops to smooth the ramp, overlay a faint (~2–4%) noise texture to dither the transition, or keep large flat gradients to higher-contrast color pairs where banding is less perceptible. A subtle grain overlay is the most reliable cure for hero-sized backgrounds.