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.
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.
Why does my gradient show visible banding in dark areas?
Banding happens when the gradient steps across colors faster than 8-bit per channel can render — common in dark blues and reds. Add a tiny noise overlay in CSS (1-2% opacity), use a wider color difference between stops, or switch to OKLCH gradients (CSS supports `linear-gradient(in oklch, ...)` for smoother perceptual blending).