How to Add Gradient Text in SVG — Gradient Fill on SVG Text
Apply beautiful gradient fills to SVG text by referencing a defined linearGradient or radialGradient as the text fill attribute.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
SVG Gradient Text with fill='url(#gradient)'
Define a `<linearGradient>` in `<defs>`, then set `fill='url(#gradId)'` on the `<text>` element. The gradient renders across the text bounding box, creating a color sweep across the letters.
- Define gradient in <defs> with stop colors
- <text fill='url(#myGrad)'>Gradient Text</text>
- Use gradientUnits='objectBoundingBox' for text-relative gradient
Animated SVG Gradient Text
Animate gradient stop colors with CSS or SMIL for a color-shifting text effect. CSS custom properties on stop-color combined with a @keyframes animation produces a smooth rainbow or brand-color cycle.
- Animate stop-color via CSS @keyframes on SVG stops
- Or animate gradientTransform for a moving gradient sweep
- Use gradient animation for hero headline text effects
Frequently Asked Questions
Can I apply a gradient to SVG text without converting to paths?
Yes — set fill='url(#gradId)' directly on the SVG <text> element. The gradient fills live text without requiring path conversion, keeping the text editable.
How do I make a rainbow gradient SVG text?
Define a linearGradient with stops at 0%, 16%, 33%, 50%, 66%, 83%, and 100% in ROYGBIV colors, then apply as fill to your SVG text element.
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