Gradients
Gradients are images generated by CSS: smooth transitions between colours, in a straight line, from a centre point, or around a circle. They scale perfectly, cost nothing to download, and can build stripes, patterns, progress rings and subtle depth.
Linear gradients
The default direction is top to bottom. Give a direction (to right, to bottom left) or an angle (135deg), then any number of colours.
Colour stops
A position after a colour says where it's fully reached. When two stops share a position, the change is instant — a hard edge instead of a blend. That's how stripes and flags are made.
Smoother gradients with interpolation
Blending in the default colour space can produce muddy grey midpoints. Specifying in oklch (or in oklab) gives more vivid, natural-looking transitions.
Radial gradients
Radial gradients spread outward from a point. Choose the shape (circle or ellipse), position (at 30% 30%) and size. The third example uses a hard stop to cut a hole.
Conic gradients
Conic gradients sweep around a centre point — perfect for pie charts, colour wheels and progress rings. A stop of 0 means "start where the last one ended".
Repeating gradients and patterns
Repeating gradients tile their colour stops. Layering gradients with a small background-size builds patterns like graph paper, checkerboards and dots.
A progress ring
A conic gradient driven by a CSS variable draws the arc; a radial gradient punches out the middle. Change --value to update it.