SVG Gradient Generator
Generate beautiful SVG gradient code — linear, radial, and multi-stop — ready to paste into your SVG files.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
SVG Gradient Generator Tools
Online tools that generate SVG gradient code.
- CSS Gradient (cssgradient.io): primarily CSS gradients but exports SVG equivalent
- SVG Gradient Editor (angrytools.com/gradient/svg): dedicated SVG gradient UI
- Grabient (grabient.com): curated gradient presets with SVG export
- uiGradients (uigradients.com): beautiful gradient collection with SVG code
Building Custom Gradients
The SVG gradient code structure for custom gradients.
- <defs>
- <linearGradient id='myGrad' x1='0%' y1='0%' x2='100%' y2='0%'>
- <stop offset='0%' stop-color='#f00' stop-opacity='1'/>
- <stop offset='50%' stop-color='#0f0' stop-opacity='1'/>
- <stop offset='100%' stop-color='#00f' stop-opacity='1'/>
- </linearGradient>
- </defs>
- Apply: fill='url(#myGrad)'
Gradient Direction Reference
Common x1,y1 → x2,y2 values for linear gradient directions.
| Direction | x1 | y1 | x2 | y2 |
|---|---|---|---|---|
| Left to Right | 0% | 0% | 100% | 0% |
| Top to Bottom | 0% | 0% | 0% | 100% |
| Diagonal (TL→BR) | 0% | 0% | 100% | 100% |
| Diagonal (TR→BL) | 100% | 0% | 0% | 100% |
Frequently Asked Questions
Can I use CSS gradient inside SVG instead of SVG gradient?
Only in inline SVG style attributes — not as fill attribute values. For SVG fill, you need SVG <linearGradient>/<radialGradient> in <defs>. CSS gradient() is for HTML background-image only.
How do I reuse a gradient across multiple SVG elements?
Define once in <defs> with a unique id. Apply to multiple elements: fill='url(#myGrad)'. All elements reference the same definition.
Can I animate SVG gradient colors?
Yes. Target stop elements in CSS: #myGrad stop { animation: colorShift 3s infinite; }. Or use JavaScript to update stop-color attributes dynamically.
What is gradientUnits='userSpaceOnUse'?
It makes gradient coordinates use absolute SVG user units instead of percentages of the filled element's bounding box. Use for gradients that should not stretch with the element.
How do I make a mesh gradient in SVG?
SVG doesn't natively support mesh gradients (unlike CSS mesh gradient). Simulate with multiple overlapping radial gradients with opacity, or use a PNG/WebP for complex mesh gradient backgrounds.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Convert Image to SVG — Free