CSS

CSS Gradient Generator

Build a linear or radial gradient and copy the CSS.

What this tool does

Builds a linear-gradient or radial-gradient visually and hands back the exact CSS background declaration to copy -- no guessing percentages or angle math by hand.

Colour stops

Add as many colour stops as needed, each with its own colour picker and position percentage. Stops can be dragged to reorder them, and dragging a stop past another actually changes the rendered gradient — including the hard-stop effect that happens when positions aren't in ascending order, which is a real, intentional CSS behaviour rather than something the tool hides from you.

Direction and type

Switch between linear and radial at any time. For linear, a slider and a numeric field both control the angle in degrees, with eight quick-pick direction buttons (the four diagonals, the four cardinal directions, plus one for radial) for the common cases.

Output format and presets

Colours can be output as hex or as rgb() in the generated CSS. Six built-in presets — three tuned to a violet/ blue/cyan palette, three warmer or darker alternatives — apply instantly, and a random-gradient button generates a fresh 2-4 stop combination with a random angle for quick inspiration.

Getting the CSS out

The live preview updates as anything changes, with a syntax-highlighted code block showing the exact background line, copyable with one click. The preview itself can also be expanded to fullscreen to check how the gradient looks at full size.

Privacy

Everything runs locally in your browser -- nothing you build is sent to a server.

FAQ

Frequently asked questions

Is my data uploaded anywhere?

No. The gradient is built and rendered entirely in the browser -- nothing is sent to a server.

Can I use more than two or three colour stops?

Yes -- any number of colour stops can be added, each with its own colour and position, and reordered by dragging.

What happens if I put the stops out of position order?

The gradient renders a hard stop exactly as real CSS does when colour-stop positions are not ascending -- the tool does not hide or correct this, since it is a genuine, sometimes useful gradient effect.

Can I get the colours as RGB instead of hex?

Yes -- a colour mode toggle switches the generated CSS between hex codes and rgb() values.

Does it support radial gradients?

Yes -- switch the type to radial at any time, or use the dedicated radial quick-pick button among the direction options.

What does the random-gradient button do?

It generates a fresh combination of 2 to 4 randomly coloured stops with a random angle (mostly linear, occasionally radial), useful for quick inspiration rather than starting from a blank gradient.