CSS Gradient Generator

Build beautiful linear and radial gradients visually — drag colour stops, set the angle, randomise, and copy production-ready CSS in one click. Free CSS gradient generator for designers and developers.

Colour stops

0%
100%
background: linear-gradient(90deg, #FF6B2C 0%, #6366F1 100%);

How to use the CSS Gradient Generator

  1. 1

    Choose linear or radial.

  2. 2

    Pick colours and drag the stops.

  3. 3

    Set the angle for linear gradients.

  4. 4

    Copy the CSS and paste into your styles.

Frequently asked questions

Can I add more than two colours?

Yes — add up to six colour stops and position each one exactly along the gradient.

Does it output real CSS?

Yes — the generated background property works in every modern browser, ready to paste.

What's the difference between linear and radial?

Linear blends along a straight line at your chosen angle; radial blends outward in a circle from the centre.

Tips & discussion

Share a trick, ask a question, or help others get more out of this tool.

Log in to share a tip or ask a question.

Loading tips…