CSS Gradient Generator

Features

• Linear, radial and conic gradients
• An adjustable 0–360 angle that drives both linear and conic
• Colour pickers for the endpoints instead of typing values
• An optional middle stop with an adjustable 0–100% position
• Every change redraws the preview instantly — there is no Generate button
• A copyable CSS rule below, with a `.gradient` selector
• Syntax-highlighted code with a one-click copy button
• A chequerboard behind the preview, so translucency and edges are visible
• Colours and the angle are validated, so the CSS that comes out is always valid
• Everything is computed in your browser; nothing is uploaded

How to use

1. Pick the type: linear, radial or conic
2. Drag the angle and use the colour pickers — the preview follows at once
3. For a three-colour transition, tick "middle stop" and adjust its colour and position
4. When it looks right, hit the copy button and take the CSS

FAQ

Which of the three should I use?

Linear is the general-purpose one: button fills, card highlights, layered page backgrounds — the angle sets the direction (`90deg` left to right, `0deg` bottom to top). Radial suits anything with a centre: a spotlight, a sphere highlight, a glow fading outward. Conic distributes colour around a centre, which makes it the easiest way to build a progress ring, a hue wheel or a pie chart — it is the one people forget, but if you want colour divided by angle, it is the only one that does that.

How is the angle measured, and why is 0 not left-to-right?

CSS `0deg` points upward (bottom to top) and the angle increases clockwise: `90deg` is left to right, `180deg` top to bottom, `270deg` right to left. This follows from the CSS coordinate system (y grows downward) while gradient angles follow the mathematical convention. You can also use keyword directions (`to right`, `to bottom right`); the difference from a fixed angle is responsiveness — a keyword adjusts its angle to cross the diagonal of whatever aspect ratio the element has, whereas a fixed angle does not.

What happens to the CSS when the middle stop is off?

It is left out entirely, rather than emitting a "50%, same colour as both ends" stop. Such a stop looks like it does something in the code while doing nothing — and it makes people afraid to delete it later. So with the box unticked there are exactly two stops in the code. What you see in the preview and what you copy are guaranteed to be the same code: the shell has a guardrail asserting that every declaration applied to the preview also appears in the delivered CSS.

Can I use the colours for something else?

Yes — the endpoint values are ordinary hex, so you can copy them out and work with them. To derive a full set around one of them (monochromatic, complementary, triadic…), use the colour schemes tool; to browse 180 ready-made gradients for inspiration, use the gradient colours tool. Both complement this one: here you build a gradient from scratch, there you pick from a library.