Design · 4 min read
CSS Gradients Explained: Linear, Radial, and Conic
CSS gradients are images generated by the browser — no files, infinitely sharp, and easy to tweak. There are three kinds, and all share the same colour-stop rules.
Try it yourself with the related tool.
Build a CSS gradient →Advertisement
Three gradient types
linear-gradient(135deg, #6366f1, #ec4899) blends along a straight line at a given angle. radial-gradient(circle at top left, ...) spreads out from a point. conic-gradient(from 90deg, ...) sweeps around a centre like a clock hand — perfect for pie charts and colour wheels.
Colour stops
Each colour can take a position: linear-gradient(#000 0%, #fff 30%) finishes the blend at 30%. Placing two colours at the same position creates a hard edge, which is how stripes and progress bars are drawn. The repeating- variants tile a pattern.
Avoid the grey middle
Blending two saturated, opposite colours in the default colour space often passes through a dull grey. Add a middle stop with a brighter in-between colour, or use a perceptual colour space: linear-gradient(in oklch, blue, yellow) is supported in modern browsers and keeps the blend vivid.
Layering
The background property accepts several comma-separated gradients, drawn top to bottom. Stack a semi-transparent gradient over a photo to improve text contrast, or combine radial gradients to build soft, glowing backgrounds.