CSS Gradient Generator

Create linear, radial and conic CSS gradients with multiple colour stops, opacity and angle controls, a live preview and copy-ready background CSS.

Developer Runs client-side Free to use

Jump to the tool

About the CSS Gradient Generator

CSS Gradient Generator builds linear, radial and conic gradients visually. Add up to ten colour stops, set each colour with a picker or HEX code, adjust its opacity and position, and change the angle, shape or centre point while a live preview updates.

The tool writes standard CSS: a solid background colour as a fallback, followed by a background-image declaration with your gradient. Colours with transparency are written as rgba() values. A random button creates a fresh, valid gradient whenever you need inspiration.

How to use

Choose Linear, Radial or Conic.
Set the angle (linear and conic), or the shape (radial) and centre position (radial and conic).
Edit each colour stop’s colour, HEX value, opacity and position; reorder, add or remove stops.
Watch the live preview, or click Random gradient for ideas.
Copy the CSS or download it as a .css file; Reset returns to the default blue-to-purple gradient.

Key features

Linear, radial and conic gradient types.
Up to 10 colour stops with colour picker, HEX input, opacity and position.
Reorder, add and remove stops (minimum two).
Angle, shape and centre-position controls where they apply.
Live preview and valid background / background-image CSS with a solid fallback.
Random gradient generator and .css download.

Best practices

Check text contrast on top of gradients, especially at the lightest and darkest stops.
Use two or three stops for subtle UI backgrounds; more stops suit decorative art.
Keep the fallback colour close to the main gradient colour.
Place stops close together for sharp bands of colour.
Test transparent stops over the real page background.

Benefits

Design gradients visually instead of guessing syntax.
Clean, standards-based CSS that works in current browsers.
Fast experimentation with random gradients.
Runs entirely in your browser.

Frequently asked questions

Which gradient types are supported?

Linear, radial and conic gradients — all part of standard CSS and supported by current browsers.

How is opacity written in the CSS?

Fully opaque stops use HEX values; stops below 100% opacity are written as rgba() with the alpha you chose.

Why is there a solid background line?

background: sets a solid fallback colour, then background-image: applies the gradient. Browsers that support gradients show the gradient.

What do stop positions do?

Each position (0–100%) sets where that colour sits along the gradient. Stops are written in the order shown in the list.

How many colour stops can I add?

Up to 10, and at least 2 are always kept so the gradient stays valid.

Does Reset remove my added stops?

Yes. Reset restores the default linear gradient with its two original stops.