CSS Gradient Generator
Pick linear, radial or conic and add as many color stops as you like. Drag handles to reposition stops on the gradient bar, copy the CSS or download as SVG.
Stops — drag to reposition
%
%
CSS
background: linear-gradient(135deg, #fb923c 0%, #7c2d12 100%);
Presets
How to use this gradient generator
- Pick a gradient type: Linear, Radial or Conic.
- Adjust angle (linear), shape & position (radial), or from-angle (conic).
- Drag the round handles on the gradient bar to reposition each color stop, or edit the color/percentage directly.
- Add or remove stops freely. Copy the CSS or download as SVG.
Frequently asked questions
What's the difference between linear, radial and conic?
Linear runs in a single direction (set by angle). Radial radiates outward from a point (circle or ellipse). Conic sweeps around a point like a clock — great for color wheels, pie charts and decorative loops.
Why might my conic gradient SVG look different?
SVG doesn't natively support conic gradients. The downloaded SVG embeds the CSS via foreignObject, which works in browsers but not in all SVG editors. For full editor support, use linear or radial.
Can I add more than 2 stops?
Yes — there's no limit. Click '+ Add stop' and the new stop is auto-placed at the largest gap.
Is anything uploaded?
No. The gradient is generated entirely in your browser.