Free CSS Gradient Generator — Linear & Radial Gradients

Gradient type

Angle (deg)

Color stops

Preview & CSS

How to use

Choose linear or radial, set angle (linear), pick two colors. Copy the generated CSS.

Quick CSS gradients for backgrounds. No server; all in the browser.

What gradient types are supported?

Linear and radial gradients. You can set colors, stops, angle (linear), and shape (radial).

Can I use the CSS in production?

Yes. The output is standard CSS. Copy and paste into your stylesheet or inline style.

Is this client-side only?

Yes. Gradients are built in the browser. No server round-trip for generating CSS.