Gradient Generator
Build CSS gradients visually. Copy the code or export as PNG.
Presets
Type
Color stops
CSS output
background: linear-gradient(135deg, #f97316 0%, #ec4899 100%);Frequently asked questions
Linear (direction + angle), radial (circle from center), and conic (sweep from an angle). All three map directly to CSS gradient functions.
Click "Add stop" to add a new stop at 50%. Click the trash icon next to any stop to remove it. Drag the handles on the gradient bar to reposition stops.
Yes — click "Export PNG" to download the gradient rendered at the size you choose.
The output is a valid CSS background value, for example: linear-gradient(135deg, #f97316 0%, #ec4899 100%). Paste it directly into your stylesheet or a style attribute.
A conic gradient sweeps colors around a center point like a pie chart or color wheel, rather than moving linearly across the element. It was added to CSS in 2021 and is well supported in all modern browsers.