CSS Gradient Generator

Build linear and radial CSS gradients with a live preview and copy the code. Runs entirely in your browser.

📖 Read the guide: How to Make a CSS Gradient →

CSS

How it works

Choose the type

Pick a linear or radial gradient.

Set the colors

Edit each color stop and its position, and add or remove stops.

Adjust the angle

For linear gradients, drag the angle to point the gradient any direction.

Copy the CSS

Copy the generated background property straight into your stylesheet.

Frequently Asked Questions

Can I use more than two colors?

Yes — add as many color stops as you like and position each one.

Does it do radial gradients?

Yes, switch the type to radial; the angle control applies to linear gradients.

Is my work uploaded?

No — the gradient is generated in your browser and never sent anywhere.

Create CSS gradients online for free with a live preview. Build linear or radial gradients, add as many color stops as you need, position each stop, and set the angle for linear gradients — then copy the ready-to-use background CSS. It is ideal for buttons, hero sections and backgrounds, and everything runs in your browser, so it is instant and private.