Chapter 23: SVG Linear Gradients
SVG Linear Gradients are one of the most beautiful and commonly used ways to fill shapes, text, paths, strokes — anything that accepts a fill or stroke — with a smooth color transition that goes in a straight line from one point to another.
Instead of one solid color, you get a smooth fade from color A → color B → color C, like a sunrise, a metallic shine, a rainbow stripe, or a modern button background.
1. Why Use Linear Gradients in SVG?
- They look professional and modern (used in almost every UI design in 2026)
- Completely vector — zoom forever, still perfect (no pixelation)
- You can apply them to fill, stroke, even text
- Reusable — define once in <defs>, use on many elements
- Animatable — change colors, angle, position with CSS or SMIL
- Very lightweight compared to images
2. Basic Structure – The Two Main Tags
You need two elements working together:
- <linearGradient> → defines the gradient itself (lives inside <defs>)
- fill=”url(#myGrad)” or stroke=”url(#myGrad)” → applies it to any shape
Basic skeleton:
XML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<svg ...> <defs> <linearGradient id="myGrad" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="yellow"/> <stop offset="100%" stop-color="red"/> </linearGradient> </defs> <rect width="300" height="200" fill="url(#myGrad)"/> </svg> |
3. Key Attributes of <linearGradient>
| Attribute | What it means | Default | Most common values | Notes |
|---|---|---|---|---|
| id | Unique name to reference later | — | “grad1”, “sunrise” | Must have! |
| x1 | Starting X position (0%–100% or absolute) | 0% | 0%, 50%, 20% | Left edge of gradient line |
| y1 | Starting Y position | 0% | 0%, 100%, 30% | Top edge |
| x2 | Ending X position | 100% | 100%, 0%, 80% | Right edge |
| y2 | Ending Y position | 0% | 0%, 100%, 70% | Bottom edge |
| gradientUnits | Coordinate system | objectBoundingBox | objectBoundingBox, userSpaceOnUse | objectBoundingBox = relative to shape size (most used) |
| spreadMethod | What happens outside gradient line | pad | pad, reflect, repeat | pad = solid color at ends |
4. Your First Linear Gradient – Horizontal Fade (Copy-Paste Now!)
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SVG Linear Gradient – Basic</title> </head> <body> <h1>Simple Horizontal Linear Gradient</h1> <svg width="500" height="300" viewBox="0 0 500 300" style="border:1px solid #eee;"> <defs> <linearGradient id="sunset" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#ff6b6b"/> <!-- red --> <stop offset="50%" stop-color="#feca57"/> <!-- yellow-orange --> <stop offset="100%" stop-color="#1e90ff"/> <!-- blue --> </linearGradient> </defs> <rect x="50" y="50" width="400" height="200" rx="30" fill="url(#sunset)"/> <text x="250" y="170" font-size="48" text-anchor="middle" fill="white"> Sunset Gradient </text> </svg> </body> </html> |
Result: Rectangle filled with smooth left-to-right color fade: red → orange-yellow → blue
5. Important Variations Everyone Should Know
A. Vertical Gradient (Top to Bottom)
XML
|
0 1 2 3 4 5 6 7 8 9 |
<linearGradient id="vertical" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="purple"/> <stop offset="100%" stop-color="pink"/> </linearGradient> |
B. Diagonal Gradient (Top-left to Bottom-right)
XML
|
0 1 2 3 4 5 6 7 8 9 |
<linearGradient id="diagonal" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="lime"/> <stop offset="100%" stop-color="darkgreen"/> </linearGradient> |
C. Gradient on Stroke (Border)
XML
|
0 1 2 3 4 5 6 |
<circle cx="250" cy="150" r="100" fill="none" stroke="url(#sunset)" stroke-width="30"/> |
→ Rainbow border!
D. More Stops (Multi-color Smooth Transition)
XML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<linearGradient id="rainbow"> <stop offset="0%" stop-color="red"/> <stop offset="20%" stop-color="orange"/> <stop offset="40%" stop-color="yellow"/> <stop offset="60%" stop-color="green"/> <stop offset="80%" stop-color="blue"/> <stop offset="100%" stop-color="violet"/> </linearGradient> |
E. Using Absolute Units (Not Percentage)
XML
|
0 1 2 3 4 5 6 7 8 9 |
<linearGradient id="absolute" gradientUnits="userSpaceOnUse" x1="50" y1="50" x2="450" y2="250"> <stop offset="0%" stop-color="cyan"/> <stop offset="100%" stop-color="navy"/> </linearGradient> |
→ Gradient line is fixed in SVG coordinates (not relative to shape size)
6. Teacher’s Quick Tips (Hyderabad Student Style 😄)
- Always put <linearGradient> inside <defs>
- Use percentages (0% to 100%) for most cases — easiest and responsive
- Add stop-opacity=”0.7″ on any <stop> if you want transparent areas
- spreadMethod=”reflect” → gradient bounces back and forth (mirror effect)
- spreadMethod=”repeat” → repeats the gradient like stripes
- Common mistake: Forget id or wrong #id in url() → gradient invisible!
- Pro trick: Animate <stop> offset or color with CSS → moving gradient effect
Understood SVG Linear Gradients fully now? This is one of the most beautiful and most-used features in modern web design.
Tell me what you want next:
- Animated linear gradient (moving shine)?
- Gradient on text or stroke only?
- Diagonal + multi-stop example project?
- Compare with radialGradient?
- Or full metallic button with linear + radial combo?
Just say — we can build any gradient style together right now! 🚀
