CSS gradient generator

A CSS gradient is generated by the browser at render time — no image file, no extra request, and it scales to any size without loss.

The three types

linear-gradient

Colours progress along a line. 0° points up, 90° points right.

radial-gradient

Colours radiate from a point. Good for spotlights and soft vignettes.

conic-gradient

Colours sweep around a centre. This is how you build a pie chart or a colour wheel in pure CSS.

Banding

Long, subtle gradients between similar colours often show visible steps, because 8 bits per channel is not enough resolution to fill a large area smoothly. Adding a faint noise overlay, or a third stop to shorten each transition, usually fixes it.

Hard stops

Two stops at the same position produce a hard edge rather than a blend — useful for stripes, progress bars and split backgrounds without any extra markup.