CSS Gradient Generator with Live Preview

How to use it

Choose a Gradient type: a line that changes colour (linear), a spread from the centre (radial) or a turn round a point (conic).
Set the Angle for a linear or conic gradient. It does not apply to a radial one.
Pick each colour in Colour stops and give its position in percent. Add or remove stops, from two to six.
Press Copy under CSS and paste the line into your stylesheet, or start from one of the presets.

The three gradient types

Linear: the colour changes along a straight line. An angle of 0deg points up and the angle turns clockwise, so 90deg runs from left to right and 180deg from top to bottom.
Radial: the colours spread out from the centre in a circle, from the first stop to the last.
Conic: the colours turn round the centre, like the hands of a clock. The angle sets where the first colour starts.

Colour stops and their positions

A colour stop is a colour at a position from 0% to 100% along the gradient. The editor writes the stops in position order, so the order you enter them in does not change the picture. Two to six stops keep the gradient easy to read and the CSS short.

The code is the standard CSS syntax that current browsers read, and the preview is painted by your browser from the same value, so what you see is what the stylesheet gets.

Worked example: the Sunrise preset

The Sunrise preset is a linear gradient at 135deg, which runs from the top left towards the bottom right. It has three stops: orange at 0%, yellow at 50% and pink at 100%.

The CSS it gives is: background: linear-gradient(135deg, #f97316 0%, #facc15 50%, #ec4899 100%);

Frequently asked questions

What does 0deg mean in a linear gradient?

0deg points up, so with that angle the colours change from the bottom to the top. The angle turns clockwise: 90deg goes from left to right and 180deg goes from top to bottom.

Why are my stops in a different order in the code?

The code writes the stops in position order, because the CSS reads them in that order. If you enter 80% before 20%, the code shows 20% first, and the picture stays the same.

Can I use a transparent colour?

This editor takes solid colours written as hex. For transparency, edit the code by hand and use a colour with an alpha value.

How many colour stops can I use?

Two to six. The editor keeps the number within that range, so the gradient always has a start and an end.

Does the code work in every browser?

The syntax is the standard form that current browsers support. Check the result in the browsers your visitors use, especially if you support older versions.

Is my design sent anywhere?

No. The gradient is built in your browser. Nothing is stored or sent to a server.

Can I use a gradient for the colour of text?

This tool writes the background declaration only. Putting a gradient behind text is possible, but it needs more CSS than this tool writes.

Sources

Figures and text last checked on Tuesday, November 10, 2026.