CSS Gradient Generator

Create beautiful CSS gradients visually. Adjust colors, direction, and stops. Copy the CSS code.

Color Stops
CSS Code

Frequently Asked Questions

What types of gradients are supported?

Linear gradients (any angle or direction) and radial gradients (circle or ellipse). Both support unlimited color stops.

Can I add more than 2 colors?

Yes — click "Add Stop" to add as many color stops as you want at any position along the gradient.

What CSS does it generate?

Standard CSS background property with the gradient function. It works in all modern browsers without vendor prefixes.

Is my data stored?

No. Everything runs in your browser. Nothing is sent to any server.