Chapter 24: SVG Radial Gradients
SVG Radial Gradients are the circular / round / spotlight / shiny ball version — the colors spread outward from a central point like ripples in water, or like the glow from a light bulb, or a shiny metallic button, or a sunset sky in a circle.
Radial gradients are very popular for:
- Shiny buttons and icons
- Glassmorphism / neumorphism effects
- Glowing orbs / neon balls
- Realistic metal / plastic / glass textures
- Spotlight effects on text or images
- Backgrounds that feel “rounded” and soft
1. Basic Structure – The Two Main Tags
Just like linear, you need:
- <radialGradient> → defines the gradient (inside <defs>)
- fill=”url(#myRadial)” or stroke=”url(#myRadial)” → applies it
Basic skeleton:
XML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<svg ...> <defs> <radialGradient id="myRadial"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="blue"/> </radialGradient> </defs> <circle cx="150" cy="150" r="100" fill="url(#myRadial)"/> </svg> |
2. Key Attributes of <radialGradient>
| Attribute | What it means | Default | Most common values | Notes |
|---|---|---|---|---|
| id | Unique name to reference | — | “shine”, “orb”, “metal” | Must have! |
| cx | Center X of the gradient (where brightest point starts) | 50% | 50%, 30%, 70% | Horizontal center |
| cy | Center Y | 50% | 50%, 40% | Vertical center |
| r | Radius of the gradient (how far colors spread) | 50% | 30%, 80%, 120% | Size of the fade circle |
| fx / fy | Focal point (where brightest spot is) | Same as cx/cy | 40%, 60% | Makes it look like light from one side |
| gradientUnits | Coordinate system | objectBoundingBox | objectBoundingBox, userSpaceOnUse | objectBoundingBox = relative to shape (most used) |
| spreadMethod | Behavior outside radius | pad | pad, reflect, repeat | pad = solid color at edges |
3. Your First Radial Gradient – Shiny Ball Effect (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 Radial Gradient – Shiny Orb</title> </head> <body> <h1>Basic Radial Gradient – Shiny Ball Look</h1> <svg width="400" height="400" viewBox="0 0 400 400" style="border:1px solid #eee; background:#1a1a2e;"> <defs> <radialGradient id="orbGradient" cx="30%" cy="30%" r="70%" fx="20%" fy="20%"> <stop offset="0%" stop-color="white"/> <!-- brightest highlight --> <stop offset="40%" stop-color="#00bfff"/> <!-- cyan middle --> <stop offset="100%" stop-color="#00008b"/> <!-- dark navy edge --> </radialGradient> </defs> <circle cx="200" cy="200" r="150" fill="url(#orbGradient)"/> <text x="200" y="220" font-size="40" text-anchor="middle" fill="white"> Shiny Orb </text> </svg> </body> </html> |
What you see:
- A glowing blue orb with white highlight in top-left
- Colors fade smoothly from center outward
- Looks like light is coming from top-left → realistic 3D shine
4. Important Variations (Try Changing These!)
A. Perfect Center Glow (No Focal Point)
XML
|
0 1 2 3 4 5 6 7 8 9 10 |
<radialGradient id="centerGlow" cx="50%" cy="50%" r="60%"> <stop offset="0%" stop-color="#ffff99"/> <stop offset="70%" stop-color="#ffcc00"/> <stop offset="100%" stop-color="#cc6600"/> </radialGradient> |
B. Radial Gradient on Stroke (Glowing Border)
XML
|
0 1 2 3 4 5 6 7 |
<circle cx="200" cy="200" r="140" fill="none" stroke="url(#centerGlow)" stroke-width="30"/> |
→ Glowing ring around the circle
C. Glass / Frosted Glass Look (Semi-transparent)
XML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
<radialGradient id="glass"> <stop offset="0%" stop-color="white" stop-opacity="0.8"/> <stop offset="50%" stop-color="rgba(255,255,255,0.4)"/> <stop offset="100%" stop-color="rgba(255,255,255,0)"/> </radialGradient> <rect x="50" y="50" width="300" height="200" rx="30" fill="url(#glass)" opacity="0.7"/> |
D. Multiple Stops + Reflect Spread (Mirror Repeat)
XML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
<radialGradient id="repeat" spreadMethod="reflect" r="20%"> <stop offset="0%" stop-color="gold"/> <stop offset="50%" stop-color="yellow"/> <stop offset="100%" stop-color="gold"/> </radialGradient> <rect width="400" height="300" fill="url(#repeat)"/> |
→ Repeating gold-yellow rings
E. Focal Point Off-Center (Light from Side)
XML
|
0 1 2 3 4 5 6 7 8 9 |
<radialGradient id="sideLight" cx="70%" cy="30%" fx="80%" fy="20%" r="80%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="purple"/> </radialGradient> |
5. Teacher’s Quick Tips (Hyderabad Student Style 😄)
- Use cx/cy/fx/fy around 30%–70% → looks more realistic (center 50% can feel flat)
- r=”50%–80%” is sweet spot for most buttons/icons — too big = flat, too small = tiny highlight
- stop-opacity on stops → create transparent fade-outs (great for glass effects)
- gradientUnits=”userSpaceOnUse” → fixed gradient size (good for background patterns)
- Common mistake: Forget id or wrong url(#id) → solid color instead of gradient
- Pro trick: Combine radial + linear gradient on same shape → metallic shine (linear base + radial highlight)
Understood SVG Radial Gradients now? They’re the secret behind most “premium” buttons, icons, loaders, and modern UI effects you see everywhere.
Tell me what you want next:
- Animated radial gradient (pulsing shine / breathing orb)?
- Full metallic button with radial + linear + shadow?
- Radial gradient on text or stroke only?
- Glassmorphism card with radial + blur?
- Or compare linear vs radial in one example?
Just say — we can build any gradient style together right now! 🚀
