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.

Preset:

Colors:

Drop your image here

Supports PNG, JPG, BMP, WEBP up to 5MB

VTracer vectorization + SVGO optimizationPrivacy protected

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.

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