SVG Radial Gradients

Beginner

⏱️ 10 min read

📚 Updated: Aug 2026

🎯 5 Examples

🚀 5 Try-it labs

Styling & Effects

SVG radial gradients tutorial illustration showing centre-out colour blending

Overview

What You’ll Learn

SVG <radialGradient> blends colours outward from a centre point. This tutorial covers defining gradients in <defs>, <stop> offsets, centre and radius with cx/cy/r, focal highlights with fx/fy, applying paint with url(#id), five worked examples, and how radial gradients compare to linear ones and patterns.

<radialGradient>

Core element

Define reusable centre-out paint inside <defs> with a unique id.

<stop>

Colour stops

Set offset, stop-color, and optional stop-opacity.

cx cy r

Centre & radius

Control where the gradient starts and how far it spreads outward.

fx fy

Focal point

Shift the highlight away from the centre for light-source effects.

url(#id)

Apply paint

Use fill or stroke with url(#yourId) on any shape.

gradientUnits

Coordinate space

objectBoundingBox (default) or userSpaceOnUse for fixed coords.

Introduction

SVG radial gradients blend two or more colours outward from a centre point. They add depth, glow, and polish to icons, buttons, charts, and illustrations — all while staying crisp as vectors.

You define a <radialGradient> once (usually in <defs>), list colour <stop>s, then reference it with url(#id) on fill or stroke.

Why it matters?

Raster glow images blur when scaled. SVG radial gradients stay sharp, stay tiny in markup, and can be shared across many shapes with one definition.

Key Highlights

Centre-Out Blends

Colour radiates from cx/cy to the outer edge at r.

Focal Highlights

fx/fy shift the brightest point for sphere and button effects.

Colour Stops

Two stops for simple glows; add more for rich orbs and vignettes.

Fill or Stroke

Same paint works for solid fills and outlined rings.

In short: define stops around a centre point, then paint shapes with url(#id).

Foundation

📝 Syntax

Basic form of an SVG radial gradient:

index.html

<svg width="300" height="120">
  <defs>
    <radialGradient id="g" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#fff" stop-opacity="0" />
      <stop offset="100%" stop-color="#2563eb" stop-opacity="1" />
    </radialGradient>
  </defs>
  <rect x="20" y="30" width="260" height="60" rx="12" fill="url(#g)" />
</svg>

Elements & Attributes

Name	Type	Description
`<radialGradient>`	Element	Defines a centre-out colour blend; place inside `<defs>` with an `id`.
`cx`, `cy`	Length / %	Centre of the gradient (default `50%`).
`r`	Length / %	Radius — how far the gradient extends outward.
`fx`, `fy`	Length / %	Optional focal point for highlight effects.
`<stop>`	Element	A colour at a position along the radius.
`offset`	% / number	Stop position from centre to edge, e.g. `0%`, `50%`, `100%`.
`stop-color`	Colour	Colour at that stop.
`stop-opacity`	0–1	Optional transparency of the stop.
`gradientUnits`	Keyword	`objectBoundingBox` (default) or `userSpaceOnUse`.

Common centre & radius presets

Effect	Attributes	Notes
Centred orb	`cx="50%" cy="50%" r="50%"`	Default — fills the shape evenly
Top-left highlight	`cx="40%" cy="35%" fx="25%" fy="20%" r="70%"`	Light source from upper-left
Edge glow	`cx="50%" cy="50%" r="60%"` + transparent outer stop	Centre colour fading to transparent

Minimal workflow

index.html

<!-- 1. Define -->
<defs>
  <radialGradient id="glow" cx="50%" cy="50%" r="50%">
    <stop offset="0%" stop-color="#22c55e" stop-opacity="0.9" />
    <stop offset="100%" stop-color="#22c55e" stop-opacity="0" />
  </radialGradient>
</defs>

<!-- 2. Apply -->
<circle fill="url(#glow)" />

Cheat Sheet

⚡ Quick Reference

Goal	Code
Define gradient	`<radialGradient id="g" cx="50%" cy="50%" r="50%">...</radialGradient>`
Two colour stops	`<stop offset="0%" stop-color="white" />` + `100%` stop
Fill a shape	`fill="url(#g)"`
Highlight offset	`fx="30%" fy="25%"` on `<radialGradient>`
Fade to transparent	`stop-opacity="0"` on the outer stop
Fixed coordinates	`gradientUnits="userSpaceOnUse"`

Compare

📋 Radial vs Linear vs Pattern vs Solid Fill

All paint SVG shapes — pick the paint that matches the look you want.

Radial

centre-out

Highlights, glows, orbs, and vignettes

Linear

straight blend

Colours along a vector — UI bars & buttons

Pattern

repeating tile

Textures, grids, and motifs

Solid

one colour

Simplest fill when no blend is needed

Context

When to Use Radial Gradients

Reach for <radialGradient> when colour should radiate from a centre point.

Spheres & orbs
3D-looking buttons, planets, and avatar rings with centre-out shading.
Glows & highlights
Status indicators, focus rings, and light-source accents on icons.
Vignettes & overlays
Soft edge darkening and spotlight effects on panels and heroes.
Brand icons
Consistent centre-out accents across an icon set.
Not for directional bars
For left-to-right or top-to-bottom blends, use linear gradients instead.

Key benefit: one definition, many shapes — crisp centre-out blends at every scale.

Hands-On

Examples Gallery

Five starter snippets using <radialGradient>. Click View Output for a preview, or Try It Yourself to edit live.

📚 Getting Started

Define a radial gradient, fill a shape, then shift the focal point.

Example 1 — Radial Gradient Fill (Rectangle)

Transparent centre fading to solid blue at the edges on a rounded rectangle.

index.html

<svg width="220" height="220" viewBox="0 0 220 220">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="rgb(255,255,255)" stop-opacity="0" />
      <stop offset="100%" stop-color="rgb(0,0,255)" stop-opacity="1" />
    </radialGradient>
  </defs>
  <rect x="10" y="10" width="200" height="200" rx="18" fill="url(#grad1)" />
</svg>

Try It Yourself

How It Works

The gradient lives in <defs>. fill="url(#grad1)" paints the rectangle with centre-out colour that fades from transparent white to solid blue.

Example 2 — Highlight Effect (Move the Focal Point)

Use fx and fy to shift the focal point and create a light-source highlight on a circle.

index.html

<svg width="240" height="160" viewBox="0 0 240 160">
  <defs>
    <radialGradient id="hi" cx="45%" cy="40%" r="70%" fx="30%" fy="25%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.85" />
      <stop offset="55%" stop-color="#60a5fa" stop-opacity="0.75" />
      <stop offset="100%" stop-color="#1d4ed8" stop-opacity="1" />
    </radialGradient>
  </defs>
  <circle cx="120" cy="80" r="58" fill="url(#hi)" />
</svg>

Try It Yourself

How It Works

fx/fy pull the brightest stop away from cx/cy, mimicking light hitting a sphere from the upper-left.

📈 Practical Patterns

Glows, vignettes, and advanced multi-stop radial fills.

Example 3 — Centre Glow (Fade to Transparent)

A bright centre that dissolves into transparency — ideal for status dots and focus rings.

index.html

<svg width="300" height="140" viewBox="0 0 300 140">
  <defs>
    <radialGradient id="glow" cx="50%" cy="50%" r="60%">
      <stop offset="0%" stop-color="#22c55e" stop-opacity="0.9" />
      <stop offset="100%" stop-color="#22c55e" stop-opacity="0" />
    </radialGradient>
  </defs>
  <rect x="0" y="0" width="300" height="140" fill="#0f172a" />
  <circle cx="150" cy="70" r="55" fill="url(#glow)" />
</svg>

Try It Yourself

How It Works

Same stop-color with falling stop-opacity creates a soft halo — no blur filter required.

Example 4 — Soft Vignette Radial Gradient

Light centre darkening toward the edges — a classic vignette overlay on a panel.

index.html

<svg width="300" height="180" viewBox="0 0 300 180">
  <defs>
    <radialGradient id="vig" cx="50%" cy="50%" r="65%">
      <stop offset="0%" stop-color="#f8fafc" stop-opacity="1" />
      <stop offset="100%" stop-color="#0f172a" stop-opacity="1" />
    </radialGradient>
  </defs>
  <rect x="20" y="20" width="260" height="140" rx="16" fill="url(#vig)" />
</svg>

Try It Yourself

How It Works

A large r with contrasting centre and edge stops creates a subtle spotlight frame around content.

Example 5 — Multi-Stop Radial on Ellipse (userSpaceOnUse)

Three colour stops on an ellipse with fixed coordinates via gradientUnits="userSpaceOnUse".

index.html

<svg width="320" height="180" viewBox="0 0 320 180">
  <defs>
    <radialGradient id="orb" gradientUnits="userSpaceOnUse"
                    cx="160" cy="90" r="80" fx="130" fy="60">
      <stop offset="0%" stop-color="#fef08a" />
      <stop offset="45%" stop-color="#f97316" />
      <stop offset="100%" stop-color="#7c3aed" />
    </radialGradient>
  </defs>
  <ellipse cx="160" cy="90" rx="120" ry="70" fill="url(#orb)" />
</svg>

Try It Yourself

How It Works

gradientUnits="userSpaceOnUse" pins cx/cy/r to absolute SVG coordinates instead of the shape’s bounding box — useful when resizing must not shift the gradient centre.

Use Cases

Real-world places where SVG radial gradients show up every day.

1. 3D Buttons

Off-centre highlights that make flat UI feel tactile.

Example: pill button with fx/fy light spot.

2. Status Glows

Online indicators and notification pulses.

Example: green centre fading to transparent halo.

3. Avatar Rings

Gradient strokes and fills around profile images.

Example: multi-stop orb behind a circular clip.

4. Hero Vignettes

Spotlight frames on landing-page panels.

Example: light centre darkening toward card edges.

5. Brand Orbs

Logo marks and decorative spheres in icon sets.

Example: shared radial palette across product icons.

6. Chart Highlights

Emphasis dots and radial heat on data points.

Example: glowing marker at a peak value.

Pro Tip: keep gradient ids unique per inline SVG on a page — duplicate ids can make the wrong paint apply.

Advantages

Why paint with SVG radial gradients instead of raster images or CSS alone.

1. Resolution Independent
Glows and orbs stay sharp on retina screens without extra assets.
2. Tiny & Reusable
One definition paints many shapes via url(#id).
3. Natural Highlights
fx/fy create convincing light-source effects on spheres.
4. Works on Strokes
Outline rings and avatar borders with the same paint system.
5. Easy to Theme
Swap stop colours or animate offsets without new image files.

Pro Tip: for UI glows, two stops with matching colour and fading opacity often look cleaner than many colour stops.

Usage Tips

Follow these practices for clean, scalable SVG radial gradients.

1. Define Before You Reference
Put gradients in <defs> (or earlier in the SVG) before url(#id).
2. Use Clear Ids
Names like glow, hi, or vig are easier to maintain.
3. Prefer 2–3 Stops for UI
Extra stops are fine for orbs; keep glows and vignettes restrained.
4. Use fx/fy for Realism
Shift the focal point slightly off-centre for convincing sphere highlights.
5. Know Your Units
Default objectBoundingBox scales with the shape; use userSpaceOnUse for fixed coords.

Pro Tip: percentage centres (50%) are easiest when you stay on the default bounding-box units.

Common Pitfalls

Avoid these mistakes when your gradient refuses to show up.

1. Wrong or Missing Id
fill="url(#missing)" paints nothing useful.
→ Match the id on <radialGradient> exactly.
2. Duplicate Ids Across Inline SVGs
Multiple SVGs on one page sharing the same id can collide.
→ Give each gradient a unique id per document.
3. Zero or Tiny Radius
If r is zero or very small, the blend collapses to a dot.
→ Use a sensible r — often 50% or larger for glows.
4. Confusing Units
Percentages behave differently under userSpaceOnUse.
→ Stick to default units until you need fixed coordinates.
5. Expecting CSS Gradient Syntax
SVG uses <stop> elements, not CSS radial-gradient() strings inside attributes.
→ Define SVG gradients with elements, then reference via url(#id).

Pro Tip: if a fill is blank, check the id spelling, that stops exist, and that the gradient is defined in the same SVG document.

🧠 How a Radial Gradient Is Applied

Define the gradient in <defs>

Gradients should live in <defs> so they can be reused across multiple shapes.

Define

Add colour stops

Each <stop> specifies a colour at a position using offset from centre to edge.

Stops

Set centre and radius with cx/cy/r

Defaults are 50% for each. Optionally shift the highlight with fx/fy.

Centre

Apply via url(#id)

Use fill="url(#id)" to fill shapes or stroke="url(#id)" to paint outlines.

Apply

Centre-out colour blends

Radial gradients make SVG graphics feel dimensional with glows, orbs, and highlights while staying crisp at any scale.

Important Notes

Define gradients in <defs> and reference them with url(#id).
cx/cy/r set the centre and spread of the blend.
offset + stop-color (and optional stop-opacity) build the ramp.
fx/fy shift the focal highlight off-centre.
Default units are objectBoundingBox — gradients scale with the shape.
Need a directional bar? Use linear gradients.

Quick Takeaway: define stops around a centre point, give the gradient an id, paint with url(#id). Keep ids unique on the page.

Compatibility

Browser Support

SVG <radialGradient> is supported in all modern browsers — and has been for many years — as part of SVG 1.1 paint servers.

✓ SVG 1.1+

SVG <radialGradient>

Use radial gradients in inline SVG or external .svg files. Stops, centre/radius attributes, focal points, and url(#id) paints work consistently across Chrome, Firefox, Safari, Edge, and mobile browsers.

100% Modern browsers

Google Chrome All versions · Desktop & Mobile

Full support

Mozilla Firefox All versions · Desktop & Mobile

Full support

Apple Safari All versions · macOS & iOS

Full support

Microsoft Edge All versions · Chromium & Legacy

Full support

Internet Explorer IE 6+ · Legacy environments

Full support

Opera All modern versions

Full support

<radialGradient> Universal

Bottom line: Safe for production sites. Prefer inline SVG or cached .svg assets; no polyfill is required for current browsers.

Wrap Up

🎉 Conclusion

SVG radial gradients are reusable paint: define <radialGradient> with colour stops, set centre and radius with cx/cy/r, then apply with fill or stroke via url(#id).

Practice the five examples above, then return to the SVG Introduction to continue building your vector graphics toolkit.

Keep ids unique, prefer 2–3 stops for UI glows, and use fx/fy for convincing highlights.

View Examples Gallery Back to SVG Introduction

Pro Tips

💡 Best Practices

✅ Do

Keep radial gradients subtle for UI (2–3 stops is usually enough)
Use fx/fy for realistic sphere and button highlights
Use gradientUnits="userSpaceOnUse" when you need fixed coordinates
Use gradients on stroke for elegant avatar rings
Name ids clearly (e.g. glow, hi, vig)

❌ Don’t

Reuse the same gradient id across separate inline SVGs on one page
Overuse many stops unless you really need complex shading
Forget to define the gradient before referencing it in fill/stroke
Use extreme contrast that causes banding (keep glows subtle)
Assume radial gradients suit directional UI bars (use linear instead)

Summary

Key Takeaways

Knowledge Unlocked

Five things to remember about SVG radial gradients

Paint shapes with centre-out colour blends.

Core concepts

▶ 01

<radialGradient>

Reusable paint in defs

API

● 02

Stops

offset + stop-color

Colour

○ 03

Centre

cx, cy, r

Radius

🔗 04

url(#id)

fill or stroke

Apply

🗺 05

fx fy

focal highlight

Light

❓ Frequently Asked Questions

How do I apply a radial gradient in SVG?

Define a <radialGradient> inside <defs> with an id, add <stop> elements, then apply it using fill="url(#id)" (or stroke="url(#id)").

What do cx, cy, and r control in a radialGradient?

cx and cy set the center of the gradient, and r sets the radius. Defaults are 50% for each when using bounding-box units.

What are fx and fy used for?

fx and fy move the focal point away from the center, creating a highlight effect that feels like a light source.

What does offset mean in a <stop> element?

offset is the position of a colour stop from the center to the outer edge, commonly 0%, 50%, and 100%.

Why does my radial gradient change when resizing?

By default, gradients use objectBoundingBox units, so they scale with the object. Use gradientUnits="userSpaceOnUse" if you need fixed coordinates.

When should I use radial vs linear gradients?

Use radial gradients when colour should radiate from a centre point (highlights, glows, orbs, vignettes). Use linear gradients for directional blends (UI bars, buttons, axes).

Did you Know? 🔊

An SVG <radialGradient> blends colours outward from a centre point — set the origin with cx and cy, the spread with r, then apply it with fill="url(#id)" or stroke="url(#id)". You can also animate stop-color or stop-opacity with CSS or SMIL for pulsing glow effects.

Continue Your SVG Journey

Return to the SVG Introduction hub and explore shapes, paths, and styling next.

SVG Introduction →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

SVG Linear Gradients SVG Introduction

SVG Radial Gradients

What You’ll Learn

<radialGradient>

<stop>

cx cy r

fx fy

url(#id)

gradientUnits

Introduction

Why it matters?

Centre-Out Blends

Focal Highlights

Colour Stops

Fill or Stroke

📝 Syntax

Elements & Attributes

Common centre & radius presets

Minimal workflow

⚡ Quick Reference

📋 Radial vs Linear vs Pattern vs Solid Fill

When to Use Radial Gradients

Spheres & orbs

Glows & highlights

Vignettes & overlays

Brand icons

Not for directional bars

Examples Gallery

📚 Getting Started

Example 1 — Radial Gradient Fill (Rectangle)

How It Works

Example 2 — Highlight Effect (Move the Focal Point)

How It Works

📈 Practical Patterns

Example 3 — Centre Glow (Fade to Transparent)

How It Works

Example 4 — Soft Vignette Radial Gradient

How It Works

Example 5 — Multi-Stop Radial on Ellipse (userSpaceOnUse)

How It Works

Use Cases

1. 3D Buttons

2. Status Glows

3. Avatar Rings

4. Hero Vignettes

5. Brand Orbs

6. Chart Highlights

Advantages

1. Resolution Independent

2. Tiny & Reusable

3. Natural Highlights

4. Works on Strokes

5. Easy to Theme

Usage Tips

1. Define Before You Reference

2. Use Clear Ids

3. Prefer 2–3 Stops for UI

4. Use fx/fy for Realism

5. Know Your Units

Common Pitfalls

1. Wrong or Missing Id

2. Duplicate Ids Across Inline SVGs

3. Zero or Tiny Radius

4. Confusing Units

5. Expecting CSS Gradient Syntax

🧠 How a Radial Gradient Is Applied

Define the gradient in <defs>

Add colour stops

Set centre and radius with cx/cy/r

Apply via url(#id)

Centre-out colour blends

Important Notes

Browser Support

SVG &lt;radialGradient&gt;

🎉 Conclusion

💡 Best Practices

✅ Do

❌ Don’t

Key Takeaways

Five things to remember about SVG radial gradients

<radialGradient>

SVG <radialGradient>