Glarso

CSS Gradient Generator

Build linear and radial CSS gradients visually and copy the code.

0%
100%
background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%);

Design gradients by eye, ship them as CSS

Adjust colors, stop positions, and the angle while watching the live preview, then copy one clean line of CSS. Linear for backgrounds and buttons, radial for glows and spotlights.

Frequently asked questions

How many color stops can I use?

Two to five. Each stop has a color and a position slider; stops are sorted automatically in the generated CSS.

What does the angle control?

The direction of a linear gradient: 0° points up, 90° right, 180° down. Radial gradients spread from the center, so the angle doesn't apply.

Is the CSS output ready for production?

Yes — it's a single standard background declaration supported by every modern browser, no vendor prefixes needed.

More free tools