Chapter 23: SVG Radial Gradients

SVG Radial Gradients

Imagine we’re sitting together again, code editor open, and I’m going to walk you through this very slowly and clearly, just like before — with plenty of copy-paste examples you can try immediately.

What is a Radial Gradient in SVG?

A radial gradient creates a smooth color transition that spreads outward (or inward) from a central point in a circular or elliptical pattern — like ripples in a pond, a spotlight, a glowing orb, or the shine on a metallic button.

• Instead of changing color along a straight line (like linear gradients), it changes color radially — from the inside point outward.
• The center is usually one color, and it smoothly blends to other colors as it moves toward the edges.
• Very popular for: realistic buttons, orbs, glow effects, spotlights, metallic/reflective surfaces, radial backgrounds, 3D-looking spheres, badges, loaders, etc.

Where do we define it? → Inside <defs>

Just like linear gradients:

The <radialGradient> element – Core attributes

Most beginner-friendly & common setting (use this 90% of the time):

→ Gradient perfectly centered in the shape’s bounding box, spreading to the edges.

The <stop> elements — same as linear gradients

You control the colors the same way:

• offset=”0%” → color at the exact center (or focal point)
• offset=”100%” → color at the outer edge (radius)

Example 1 – Simple centered radial gradient (classic orb/glow)

Result: White center fading smoothly to purple at the edges — looks like a soft glowing ball.

Here are some visual examples of simple radial gradients (imagine seeing these side by side):

• White → light blue → deep blue
• Yellow → orange → red (sun-like)
• Silver → dark gray (metallic sphere)

Example 2 – Focal point offset (realistic shine/highlight)

→ fx/fy moved to top-left → creates a bright highlight spot (very common for buttons/icons).

Example 3 – Elliptical gradient (non-circular)

→ Because the shape is elliptical, the gradient stretches to match → creates oval glow.

Quick Cheat Sheet – Popular radial gradient styles

Common beginner mistakes

• Forget id → fill=”url(#wrongId)” shows nothing
• r=”0.5″ instead of “50%” → tiny gradient (use % with objectBoundingBox)
• No <stop> at 0% and 100% → gradient may look empty or wrong
• gradientUnits=”userSpaceOnUse” without adjusting numbers → gradient doesn’t scale with shape
• Too many stops too close → hard bands instead of smooth blend

Mini practice tasks

1. Make a red-to-yellow sunset orb (centered radial gradient)
2. Create a modern button look: blue circle + offset white highlight shine
3. Try a metallic-looking sphere (silver gradient with offset focal point)

Paste your code here if you want feedback — I’ll review it like we’re pair-programming together 😊

Radial gradients are super powerful for giving flat shapes depth and realism — you now have both linear and radial in your toolbox!

Next we can cover repeating gradients, gradient on text/stroke, combining linear + radial, or animating gradients. Which direction sounds most fun to you? Or any part of radial gradients still fuzzy? Just say — we’ll zoom in until it’s crystal clear! 🚀