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 does offset mean in a element?

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

SVG Radial Gradients

Q: How do I apply a radial gradient in SVG?

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

Q: 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.

Q: 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.

Beginner

⏱️ 7 min read

📚 Updated: Aug 2025

🎯 2 Examples

Gradients

What You’ll Learn

Radial gradients blend colours outward from a center point. They’re ideal for glows, highlights, spheres, depth, and soft backgrounds in modern UI.

You’ll learn how to define <radialGradient> inside <defs>, create colour stops with <stop>, control the center with cx/cy, radius with r, and optionally move the focal point using fx/fy.

⚡ Quick Reference — SVG Radial Gradient

Define <radialGradient>

Inside <defs> with an id

Stops <stop>

Use offset + stop-color/opacity

Center cx / cy

Where the gradient originates

Radius r

How far the gradient spreads

Focal point fx / fy

Optional highlight offset

Basic Syntax

<svg>
  <defs>
    <radialGradient id="g">
      <stop offset="0%" stop-color="#fff" stop-opacity="0" />
      <stop offset="100%" stop-color="#2563eb" stop-opacity="1" />
    </radialGradient>
  </defs>
  <rect fill="url(#g)" />
</svg>

👀 Live Preview — Glow & Highlight

Radial gradients are perfect for glows and light-source highlights.

Center glow

Off-center highlight

Soft vignette

Radial Gradient Fill (Rectangle)

This example transitions from transparent white in the center to solid blue at the edges.

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

Highlight Effect (Move the Focal Point)

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

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>

💡 Best Practices

Do

Use 2–3 stops for clean UI gradients
Use fx/fy for realistic highlights
Use consistent palettes across your icon/UI set
Use gradientUnits="userSpaceOnUse" when you need fixed positioning
Name ids clearly (e.g. glow, hi)

Don’t

Reuse the same gradient id across multiple inline SVGs on one page
Overuse many stops unless you need complex shading
Assume gradients look identical on all displays without testing
Forget to define the gradient before referencing it in fill/stroke
Use extreme contrast that causes banding (keep it subtle)

❓ Frequently Asked Questions

How do I apply a radial gradient in SVG?

Define a <radialGradient> inside <defs> and apply it with fill="url(#id)" (or stroke="url(#id)").

What do cx, cy, and r control?

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

What are fx and fy used for?

They move the focal point away from the center to create highlight effects (like a light source shining from one side).

What does offset mean in <stop>?

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

Why does my radial gradient change when resizing?

The default unit system scales gradients with the object. Use gradientUnits="userSpaceOnUse" if you need fixed coordinates.

Draw Rounded Rectangles Next

Learn how to use <rect> with rx/ry to create cards, buttons, and UI shapes.

SVG Rectangle →

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)

4 people found this page helpful

SVG Polyline SVG Rectangle