SVG Gradients: Linear and Radial Guide
SVG gradients are defined in <defs> and referenced by id — here's how to create beautiful gradient fills for any SVG shape.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Linear Gradient in SVG
A linear gradient transitions from one color to another in a straight line.
- Define in <defs>: <linearGradient id='grad1' x1='0%' y1='0%' x2='100%' y2='0%'>
- <stop offset='0%' stop-color='#4F46E5'/>
- <stop offset='100%' stop-color='#7C3AED'/>
- </linearGradient>
- Apply: <rect fill='url(#grad1)' width='200' height='100'/>
- x1/y1 to x2/y2: direction of gradient (0-100% coordinates within the shape)
Radial Gradient in SVG
Radial gradients radiate from a center point.
- <radialGradient id='rg1' cx='50%' cy='50%' r='50%'>
- cx/cy: center of the gradient circle
- r: radius of the outer edge
- fx/fy: focal point (where the brightest center color appears — defaults to cx/cy)
- <stop offset='0%' stop-color='white'/><stop offset='100%' stop-color='#4F46E5'/>
Gradient Best Practices
Tips for production-quality SVG gradients.
- gradientUnits='userSpaceOnUse': coordinates are in the SVG coordinate system (useful for shared gradients)
- gradientUnits='objectBoundingBox': default — percentages relative to each shape
- gradientTransform: rotate, scale, or translate a gradient: gradientTransform='rotate(45)'
- Reuse: define once in <defs>, apply to multiple shapes with the same id reference
- SVGO: use mergeStyles and cleanupIds optimization — don't merge gradient defs
Frequently Asked Questions
Can I use a gradient as an SVG stroke?
Yes — set stroke='url(#gradId)' on your SVG element. Works identically to fill gradients. Combine with stroke-width for gradient-colored borders.
How do I make a gradient that transitions at an angle?
Adjust x1/y1 and x2/y2 on linearGradient. For 45 degrees: x1='0%' y1='0%' x2='100%' y2='100%'. For vertical: x1='0%' y1='0%' x2='0%' y2='100%'.
Why does my SVG gradient look different in Safari?
Safari historically had linearGradient rendering bugs. Set gradientUnits='userSpaceOnUse' with explicit coordinate values (instead of percentages) for the most consistent cross-browser gradient rendering.
Can I animate SVG gradients?
Yes — with CSS or GSAP. Animate stop-color with CSS @keyframes: @keyframes shift { from { stop-color: blue; } to { stop-color: purple; } }. Target stop elements directly.
How many color stops can an SVG gradient have?
Unlimited — add as many <stop> elements as you need. Browsers render all stops. However, gradients with many stops can slow down rendering on older devices.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG