CSS Gradient Generator

Three kinds of gradient

• Linear — colour changes along a straight line. The angle is measured clockwise from pointing up, so 0° goes bottom to top, 90° left to right, and 180° top to bottom.
• Radial — colour radiates from a centre point outwards. Good for spotlights and soft vignettes.
• Conic — colour sweeps around a centre like a clock face. Used for pie charts, colour wheels and progress rings, all of which can be built with nothing but CSS.

The muddy middle

Blending two colours that sit opposite each other on the colour wheel takes you through grey on the way, because the midpoint of two opposites is desaturated. Blue to orange passes through a dull brown; red to green through mud.

The fix is a third stop. Pick a colour that sits between them on the wheel and add it in the middle — blue to purple to red rather than blue straight to red. The steps below the preview show you exactly what the midpoints are, so you can see the problem before you ship it.

Gradients and text

Text on a gradient is a contrast problem, because the contrast changes across the element. A pairing that passes at one end can fail at the other, and automated checkers generally test one sampled point and miss it.

Check the text colour against both ends with the contrast checker, not just the end it happens to start on.

Restraint is usually right

The gradients that look good in production are mostly subtle: two shades of the same hue, a few percent apart in lightness. Wide gradients between unrelated hues date quickly and are hard to build a whole interface around. Keep the loud ones for a hero section.

Common uses

• Hero and header backgrounds.
• Button and card treatments.
• Overlays that make text readable over a photograph.
• Progress rings and pie charts using a conic gradient.

Questions people ask

How does the angle work in CSS?

Measured clockwise from pointing up. 0deg goes bottom to top, 90deg left to right, 180deg top to bottom.

Why does my gradient look muddy in the middle?

Because the two colours sit opposite each other on the wheel, and their midpoint is desaturated. Add a third stop between them.

Can I put text on a gradient?

Yes, but check the contrast at both ends. It changes across the element, and automated checkers usually sample one point.

What is a conic gradient for?

Sweeping colour around a centre — pie charts, colour wheels and progress rings, all in pure CSS.