Gradient Generator

What the code does

A CSS gradient is drawn by the browser, not stored as a picture, so it stays sharp at any size and costs nothing to download. The line this page produces is the whole thing: paste it as a background and you have the same gradient you can see above.

The stops are spread evenly, which is the sensible default and what the preview shows. Moving individual stops to uneven positions is a thing CSS can do — #2B35A0 0%, #FFDD57 30% and so on — and the copied line is a fine starting point for that: change the percentages by hand once you have the colors right.

Angles, and where they start

In CSS, 0deg points upward and the angle turns clockwise, so 90deg runs left to right and 180deg runs top to bottom. That trips people up, because it is the opposite of the convention in most drawing programs. The radial option ignores the angle entirely — a circle from the middle outward has no direction — so the control is hidden when you switch to it, rather than sitting there doing nothing.

Two honest notes

Nothing here animates. Gradient tools often pulse or rotate to show off; this one does not, because a moving background is a genuine accessibility problem for some visitors and the site does not do it anywhere.

Banding is real. A gradient between two similar colors across a wide area can show visible steps rather than a smooth blend — that is your display and the 8 bits per channel it is being sent, not a mistake in the code. The Color Banding Test shows how prone your screen is to it.

To get the colors first, use the Palette Generator, or write one three ways with the Color Converter.