Does it support all three CSS gradient types?

Yes — linear with direction or angle, radial, and conic gradients are all supported, not just linear.

Can I reorder or reposition individual color stops?

Yes, stops can be dragged to reorder them and their position slider adjusted individually.

Gradient Generator

CSS gradients, live preview.

Runs in your browser

Custom angle

Color stops

100%

Presets

CSS

background: linear-gradient(to right, #0ea5e9 0%, #6366f1 100%);

Color Picker

Palette Generator

About

Gradient Generator builds linear, radial, and conic CSS gradients with a live preview, drag-to-reorder color stops, and adjustable stop positions, then outputs copy-ready background CSS. Six built-in presets give you a starting point if you're not building from scratch. Nothing about the gradient you design is sent anywhere — it's just CSS text generated in your browser.

Frequently asked

Does it support all three CSS gradient types?: Yes — linear with direction or angle, radial, and conic gradients are all supported, not just linear.
Can I reorder or reposition individual color stops?: Yes, stops can be dragged to reorder them and their position slider adjusted individually.