About CSS Gradient Generator

CSS Gradient Generator lets you build a linear, radial, or conic gradient by adding colour stops and setting an angle, with a live preview. Copy the background declaration, or paste an existing gradient to load and edit it.

It runs in the page and remembers your last gradient in your own browser. Nothing is uploaded.

How to use it

  1. Choose the gradient type and angle.
  2. Add colour stops and drag their positions; remove any you do not need.
  3. Copy the CSS. To edit an existing gradient, paste it into the import field.

Common questions

Can I import a gradient with a keyword angle?

Yes. 'to right', 'to bottom left', and turn/rad units are converted to degrees.

In what order are the stops written?

Sorted by position, so the output is stable.

Does it support multiple gradients or images?

One gradient at a time. Layering is easy to do by hand once you have each declaration.

Is anything uploaded?

No. It is all local to your browser.