Introduction to radial gradients in SVG
Gradients are powerful visual tools that create smooth transitions between multiple colors. In SVG, the <radialGradient> element allows you to define circular gradients, also known as radial gradients, that extend from a central point outward. This technique is essential for adding volume, depth, and a realistic appearance to your vector graphics.
If you want to master the fundamentals of web development and understand how to integrate SVGs into your pages, our complete HTML course will guide you step by step through this learning journey. You will discover how to use SVG optimally to create modern and performant interfaces.
💡 SVG radial gradients are particularly useful for simulating lighting effects, creating 3D spheres, or adding realistic reflections to your vector illustrations.
Unlike linear gradients that follow a straight line, radial gradients create a color transition from a central circle (the focal point) to an outer circle. This characteristic makes them perfect for many creative use cases that we will explore together in this article.
Definition and syntax of radialGradient
Basic syntax
The <radialGradient> element is an SVG definition element that must be placed inside a fill or stroke attribute.
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="myRadialGradient">
<stop offset="0%" stop-color="#ffffff" />
<stop offset="100%" stop-color="#3498db" />
</radialGradient>
</defs>
<circle cx="100" cy="100" r="80" fill="url(#myRadialGradient)" />
</svg>In this example, we create a simple radial gradient that goes from white at the center to blue at the edges. The url(#id) syntax.
Main attributes
The <radialGradient> element accepts several attributes that control the position, size, and behavior of the gradient:
| Attribute | Description | Default value |
|---|---|---|
id | Unique identifier to reference the gradient | None (required) |
cx | X coordinate of the outer circle center | 50% |
cy | Y coordinate of the outer circle center | 50% |
r | Radius of the outer circle | 50% |
fx | X coordinate of the focal point | Equal to cx |
fy | Y coordinate of the focal point | Equal to cy |
fr | Radius of the focal circle | 0% |
gradientUnits | Coordinate system used | objectBoundingBox |
spreadMethod | Behavior beyond the boundaries | pad |
The stop elements
Each radial gradient contains one or more <stop> elements that define colors and their positions in the gradient:
<radialGradient id="multipleStops">
<stop offset="0%" stop-color="#f39c12" stop-opacity="1" />
<stop offset="50%" stop-color="#e74c3c" stop-opacity="0.8" />
<stop offset="100%" stop-color="#9b59b6" stop-opacity="0.6" />
</radialGradient>The offset attribute defines the stop position (from 0% to 100%), stop-color defines the color, and stop-opacity allows you to control the transparency at that specific point in the gradient.
Understanding the coordinate system
gradientUnits: objectBoundingBox vs userSpaceOnUse
The gradientUnits attribute determines how the gradient coordinates are interpreted. This choice has a significant impact on the final rendering.
<!-- objectBoundingBox mode (default) -->
<!-- Values are relative to the element (0 to 1 or 0% to 100%) -->
<radialGradient id="gradientBBox" gradientUnits="objectBoundingBox"
cx="0.5" cy="0.5" r="0.5">
<stop offset="0%" stop-color="#2ecc71" />
<stop offset="100%" stop-color="#27ae60" />
</radialGradient>
<!-- userSpaceOnUse mode -->
<!-- Values are in absolute SVG coordinates -->
<radialGradient id="gradientUser" gradientUnits="userSpaceOnUse"
cx="100" cy="100" r="80">
<stop offset="0%" stop-color="#2ecc71" />
<stop offset="100%" stop-color="#27ae60" />
</radialGradient>Warning: with objectBoundingBox, the gradient automatically adapts to the size of the element using it. With userSpaceOnUse, the gradient remains fixed in the SVG coordinate system.
Positioning the focal point
The focal point (fx, fy) is where the gradient actually emanates from. By default, it coincides with the center of the outer circle, but you can offset it to create more realistic lighting effects:
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Gradient with offset focal point for 3D effect -->
<radialGradient id="sphere3D" cx="50%" cy="50%" r="50%"
fx="30%" fy="30%">
<stop offset="0%" stop-color="#ffffff" />
<stop offset="40%" stop-color="#3498db" />
<stop offset="100%" stop-color="#1a5276" />
</radialGradient>
</defs>
<circle cx="100" cy="100" r="80" fill="url(#sphere3D)" />
</svg>By offsetting the focal point toward the top and left, we simulate a light source illuminating the sphere from that direction, creating a convincing three-dimensional effect.
Advanced practical examples
Creating a realistic sphere
Let's see how to create a sphere with a realistic volume effect using several combined techniques:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Main sphere gradient -->
<radialGradient id="sphereMain" cx="50%" cy="50%" r="50%"
fx="35%" fy="35%">
<stop offset="0%" stop-color="#ecf0f1" />
<stop offset="10%" stop-color="#e74c3c" />
<stop offset="70%" stop-color="#c0392b" />
<stop offset="100%" stop-color="#641e16" />
</radialGradient>
<!-- Light reflection -->
<radialGradient id="reflection" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.8" />
<stop offset="100%" stop-color="#ffffff" stop-opacity="0" />
</radialGradient>
</defs>
<!-- Main sphere -->
<circle cx="100" cy="100" r="80" fill="url(#sphereMain)" />
<!-- Reflection -->
<ellipse cx="75" cy="70" rx="25" ry="15" fill="url(#reflection)" />
</svg>This technique layers two elements: a main circle with a radial gradient that simulates volume, and an ellipse with a transparent gradient that simulates the light reflection.
Halo light effect
Radial gradients are perfect for creating halo or glow effects around elements:
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="haloBelivemy" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#f1c40f" stop-opacity="1" />
<stop offset="30%" stop-color="#f39c12" stop-opacity="0.6" />
<stop offset="60%" stop-color="#e67e22" stop-opacity="0.3" />
<stop offset="100%" stop-color="#d35400" stop-opacity="0" />
</radialGradient>
</defs>
<!-- Halo -->
<circle cx="150" cy="100" r="80" fill="url(#haloBelivemy)" />
<!-- Center text -->
<text x="150" y="105" text-anchor="middle"
font-family="Arial" font-size="14" fill="#2c3e50">
Believemy
</text>
</svg>Using spreadMethod
The spreadMethod attribute controls what happens when the gradient doesn't fully cover the target element. Three values are possible:
<svg width="400" height="150" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- pad: the final color extends (default) -->
<radialGradient id="padGradient" cx="50%" cy="50%" r="25%"
spreadMethod="pad">
<stop offset="0%" stop-color="#9b59b6" />
<stop offset="100%" stop-color="#8e44ad" />
</radialGradient>
<!-- repeat: the gradient repeats -->
<radialGradient id="repeatGradient" cx="50%" cy="50%" r="25%"
spreadMethod="repeat">
<stop offset="0%" stop-color="#9b59b6" />
<stop offset="100%" stop-color="#8e44ad" />
</radialGradient>
<!-- reflect: the gradient reverses and repeats -->
<radialGradient id="reflectGradient" cx="50%" cy="50%" r="25%"
spreadMethod="reflect">
<stop offset="0%" stop-color="#9b59b6" />
<stop offset="100%" stop-color="#8e44ad" />
</radialGradient>
</defs>
<rect x="10" y="25" width="100" height="100" fill="url(#padGradient)" />
<rect x="150" y="25" width="100" height="100" fill="url(#repeatGradient)" />
<rect x="290" y="25" width="100" height="100" fill="url(#reflectGradient)" />
</svg>The repeat value creates repetitive concentric circles, while reflect produces a mirror effect between each repetition, ideal for smoother patterns.
Gradient transformation and animation
Using gradientTransform
The gradientTransform attribute allows you to apply transformations to the gradient independently of the element using it:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Horizontally stretched gradient -->
<radialGradient id="stretchedGradient" cx="50%" cy="50%" r="50%"
gradientTransform="scale(1.5, 1)">
<stop offset="0%" stop-color="#1abc9c" />
<stop offset="100%" stop-color="#16a085" />
</radialGradient>
<!-- Rotated gradient -->
<radialGradient id="rotatedGradient" cx="30%" cy="30%" r="70%"
gradientTransform="rotate(45, 0.5, 0.5)">
<stop offset="0%" stop-color="#e74c3c" />
<stop offset="100%" stop-color="#c0392b" />
</radialGradient>
</defs>
<ellipse cx="100" cy="100" rx="80" ry="60" fill="url(#stretchedGradient)" />
</svg>Animation with CSS and SMIL
You can animate radial gradients to create captivating dynamic effects:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="animatedGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#3498db">
<animate attributeName="stop-color"
values="#3498db;#e74c3c;#f1c40f;#3498db"
dur="4s" repeatCount="indefinite" />
</stop>
<stop offset="100%" stop-color="#2c3e50">
<animate attributeName="stop-color"
values="#2c3e50;#c0392b;#d35400;#2c3e50"
dur="4s" repeatCount="indefinite" />
</stop>
<!-- Radius animation -->
<animate attributeName="r"
values="30%;50%;30%"
dur="2s" repeatCount="indefinite" />
</radialGradient>
</defs>
<circle cx="100" cy="100" r="80" fill="url(#animatedGradient)" />
</svg>SMIL animations are native to SVG and do not require JavaScript. They are particularly useful for simple, lightweight animations.
Best practices and optimization
Reusing gradients
A good practice is to define your gradients once in the
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Single gradient reused -->
<radialGradient id="believemyTheme" cx="30%" cy="30%" r="70%">
<stop offset="0%" stop-color="#667eea" />
<stop offset="100%" stop-color="#764ba2" />
</radialGradient>
</defs>
<!-- Reuse on multiple elements -->
<circle cx="80" cy="100" r="60" fill="url(#believemyTheme)" />
<circle cx="200" cy="100" r="40" fill="url(#believemyTheme)" />
<circle cx="320" cy="100" r="50" fill="url(#believemyTheme)" />
</svg>Performance and accessibility
To optimize performance and accessibility of your SVGs with radial gradients:
- Limit the number of stops in your gradients (3-5 stops are usually sufficient)
- Avoid complex animations on mobile devices
- Use
objectBoundingBoxfor responsive gradients - Add text alternatives via the
aria-labelattribute on the parent SVG - Test rendering across different browsers
Very complex gradients with many stops or heavy animations can impact performance, particularly on mobile devices. Always test your creations on different devices.
Common mistakes to avoid
Here are the most common mistakes when using <radialGradient>:
- Forgetting the id attribute: Without a unique identifier, the gradient cannot be referenced
- Placing the gradient outside defs: The gradient must always be inside a
element - Wrong reference syntax: Use
fill="url(#id)"notfill="#id" - Confusing percentages and pixels: With
objectBoundingBox, use values between 0 and 1 or percentages - Focal point outside the circle: The focal point should stay within the bounds of the outer circle for predictable rendering
Comparison with linearGradient
SVG offers two types of gradients: <radialGradient> and
| Characteristic | radialGradient | linearGradient |
|---|---|---|
| Direction | Circular, from center outward | Linear, from one point to another |
| Focal point | Yes (fx, fy, fr) | No |
| Typical use cases | Spheres, halos, reflections | Buttons, backgrounds, bars |
| Complexity | More attributes to master | Simpler to use |
| 3D effect | Natural and realistic | Less convincing |
Browser compatibility
The <radialGradient> element benefits from excellent compatibility with all modern browsers:
| Browser | Support | Minimum version |
|---|---|---|
| Chrome | ✅ Full | 4+ |
| Firefox | ✅ Full | 3+ |
| Safari | ✅ Full | 3.1+ |
| Edge | ✅ Full | 12+ |
| Opera | ✅ Full | 9+ |
| Internet Explorer | ✅ Full | 9+ |
You can therefore use SVG radial gradients in production without fear of compatibility issues on current browsers.
Frequently asked questions about radialGradient
What is the difference between cx/cy and fx/fy in radialGradient?
The cx and cy attributes define the center of the gradient's outer circle, which is where the color transition ends. The fx and fy attributes define the focal point, the place from which the gradient emanates. By offsetting the focal point from the center, you can create realistic lighting effects, as if a light source were illuminating an object from a particular angle.
Can you use radialGradient with SVG text?
Yes, you can apply a radial gradient to SVG text using the fill attribute on the <text> element. The gradient will be applied as the fill for the characters, creating interesting typographic effects. You can also use it with the stroke attribute to color only the text outline.
How do I make a radial gradient responsive?
To create a responsive radial gradient, use gradientUnits="objectBoundingBox" (default value) with percentage values or decimals between 0 and 1. This way, the gradient will automatically adapt to the size of the element using it, regardless of the SVG sizing.
How can I learn HTML and CSS?
To master HTML and CSS, including advanced techniques like SVGs and their gradients, we recommend following our complete HTML course. This course will guide you from the basics to advanced concepts, with practical exercises to consolidate your knowledge and create modern, professional web interfaces.