How to Add Gradients to SVG
SVG gradients are more powerful than CSS gradients  they work on any shape, at any angle, with full transparency control.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Linear Gradient in SVG
Define a gradient in <defs>, then reference it by ID in any fill attribute.
- <defs><linearGradient id='grad1' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' style='stop-color:rgb(255,255,0)'/><stop offset='100%' style='stop-color:rgb(255,0,0)'/></linearGradient></defs>
- <rect fill='url(#grad1)' width='200' height='100'/>
- x1/y1 → x2/y2 defines the gradient direction vector
- Multiple <stop> elements create multi-color gradients
Radial Gradient in SVG
<radialGradient id='rg' cx='50%' cy='50%' r='50%'><stop offset='0%' stop-color='white'/><stop offset='100%' stop-color='navy'/></radialGradient>. cx/cy sets the center; r sets the radius.
Gradient on SVG Text and Paths
SVG gradients work on any element  text, paths, shapes. Apply to text: <text fill='url(#grad1)'>Gradient Text</text>. The gradient fills the text shape itself.
- fill='url(#gradientId)' works on text, path, rect, circle, polygon, ellipse
- stroke='url(#gradientId)' applies gradient to the outline
- For complex paths from vectorized images, add a gradient overlay using a <rect> with gradient fill above the paths with a multiply blend mode
Adding Gradients in Inkscape and Illustrator
Design tools make gradient creation visual:
- Inkscape: select shape → Object > Fill and Stroke → click Linear or Radial gradient → drag handles to adjust
- Illustrator: select shape → Gradient panel → choose Linear or Radial → edit color stops
- Both tools embed gradient definitions in the SVG's <defs> on export
Frequently Asked Questions
Can I use CSS gradients on SVG shapes?
Yes, via fill: linear-gradient() in CSS  but browser support on SVG shapes is inconsistent. The SVG-native <linearGradient> approach is more reliable across all browsers.
How do I make a gradient fade to transparent in SVG?
Use stop-opacity='0' on the transparent stop: <stop offset='100%' stop-color='white' stop-opacity='0'/>. This creates a clean fade to transparent.
Can SVG gradients be animated with CSS?
Yes. Animate stop-color or stop-opacity with CSS @keyframes. Target gradient stops: #myGradient stop:first-child { animation: colorShift 2s linear infinite; }
Why does my SVG gradient look wrong when the SVG is resized?
SVG gradients use gradientUnits='objectBoundingBox' by default (percentage-based, scales with the shape). If you set gradientUnits='userSpaceOnUse', the gradient uses fixed coordinates and won't scale with the shape.
How do I add a gradient to an SVG icon without editing the SVG code?
Use CSS: define a gradient mask layer. Or add the gradient in a parent <svg> with a <defs> section and recolor the icon using CSS filter: hue-rotate() + sepia() for simple cases.
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