Working with Gradients

A CSS gradient is an image the browser draws, which makes it cheap, resolution-independent and easy to get subtly wrong. Two problems account for almost every bad gradient, and both are avoidable.

Open the Gradient Maker

Picking the type

Linear gradients have a direction and suit backgrounds, buttons and dividers. Radial gradients spread from a point and are right for glows and focal points. Conic gradients sweep around a centre, which is what makes them the natural fit for pie charts, colour wheels and the highlight that runs around a card.

The grey midpoint

Browsers interpolate in sRGB by default, and the straight line between two opposite hues passes close to grey — which is why a blue-to-orange gradient sags in the middle. Add a stop in a hue that sits between the two, or interpolate in OKLCH, and the midpoint stays saturated.

Banding on large areas

Across a wide area, an 8-bit gradient can show visible steps. Keeping the stops closer in lightness reduces it, and a faint noise or grain overlay hides what remains — the eye reads the texture instead of the steps.

Step by step

Choose the type from the shape you need, not from the look you want.
Start with two stops and add a third only to fix a dull midpoint.
Adjust the angle or centre before adding more colours — placement fixes more than palette does.
Check the gradient at full width, where banding shows up.
Copy the CSS and keep the stop colours as tokens if they are part of the brand.

Frequently asked questions

Are gradients expensive to render?

Practically never — the compositor draws them, and they cost far less than an image of the same area. The exception is animation: moving background-position or opacity is cheap, while animating the stop colours forces a repaint every frame.

Can I use a gradient behind text?

Yes, but check contrast at the darkest and lightest points of the gradient, not the average. Text that passes over one end can easily fail over the other.

Do conic gradients work everywhere?

They work in every current browser. Very old versions do not support them, so give those a flat background-color fallback if you still support them.