CSS Gradient Generator

Build linear and radial CSS gradients with as many color stops as you like, adjust the angle, and copy production-ready CSS — all in your browser.

CSS
background: linear-gradient(90deg, #7c3aed 0%, #ec4899 100%);

Color stops

How it works

  1. 1

    Add color stops

    Start from two stops and add, remove or recolor as many as you need.

  2. 2

    Shape it

    Switch between linear and radial and set the angle to aim the gradient.

  3. 3

    Copy the CSS

    Copy the generated background CSS and paste it straight into your stylesheet.

Instant & 100% private — nothing is uploaded

Every color is generated and converted right on your own device. Nothing is sent to a server, so there are no waits, no limits, and no copies kept anywhere.

Frequently asked questions

Can I make radial gradients too?
Yes. Toggle between linear and radial. Linear gradients use an adjustable angle; radial gradients radiate from the centre.
How many color stops can I add?
As many as you like. Each stop has its own color and position, and the live preview updates as you edit.
Is the CSS ready to paste?
Yes. The output is a standard background property you can drop directly into your CSS, with no prefixes needed for modern browsers.
Does it work offline?
Once the page has loaded, the generator runs fully in your browser with no server calls.