CSS gradients

How CSS gradients are built

A CSS gradient is an image the browser draws for you. Linear gradients run along an angle, radial gradients spread from a point, and conic gradients sweep around one — which is what makes them handy for pie charts and colour wheels. Each takes a list of colour stops, and the browser fills in everything between them.

Keeping a gradient clean

Two problems spoil most gradients. The first is a muddy middle: blending opposite hues in sRGB passes through grey, so adding a deliberate midpoint stop, or interpolating in OKLCH, keeps the transition alive. The second is banding on wide areas — using stops that are closer in lightness, or a subtle grain overlay, hides the steps.

When should I use linear, radial or conic?

Linear for backgrounds, buttons and section dividers — anything with a direction. Radial for spotlights, glows and soft focal points. Conic for anything that goes around a centre: pie and donut charts, colour wheels, and the sweeping highlight effect on cards.

Why does my gradient look grey in the middle?

Because the browser interpolates in sRGB by default, and the straight line between two opposite hues passes near grey. Add a third stop in a hue that sits between the two, or interpolate in OKLCH, and the midpoint stays saturated.

Do gradients slow a page down?

Practically never. A CSS gradient is drawn by the compositor and costs far less than an image file of the same area. Animating one is the exception: animating background-position or opacity stays cheap, while animating the colour stops themselves forces a repaint on every frame.

Will these work in every browser?

Linear and radial gradients work everywhere in use today. Conic gradients are supported in all current browsers but not in very old ones, so give them a flat background-color fallback if you still support legacy versions.