SVG Radial Gradient
A radial gradient blends colors outward from a center point, and cx/cy/r/fx/fy let you shape that glow and shift its hotspot off-center.
Defining a Radial Gradient
Like a linear gradient, a <radialGradient> is declared once inside <defs> with its own id, filled with <stop> children, and referenced from a shape via fill="url(#id)". Instead of blending along a line, though, the colors radiate outward from a center circle - the first stop sits at the center and the last stop sits at the outer edge, r units away.
cx, cy, and r: the Gradient Circle
cx and cy place the center of the gradient circle, and r sets its radius - the distance from the center at which the last stop (offset 1) lands. With the default gradientUnits of objectBoundingBox, all three are fractions of the shape's bounding box, so cx="50%" cy="50%" r="50%" centers the gradient and reaches exactly to the shape's edges, producing an even, centered glow.
Example
<!DOCTYPE html>
<html>
<body>
<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'>
<defs>
<radialGradient id='glow' cx='50%' cy='50%' r='50%'>
<stop offset='0%' stop-color='#fff6d5'/>
<stop offset='100%' stop-color='#f2994a'/>
</radialGradient>
</defs>
<circle cx='100' cy='100' r='90' fill='url(#glow)'/>
</svg>
</body>
</html>fx and fy: Moving the Hotspot
fx and fy define the focal point - where offset 0, the innermost color, actually starts radiating from. Left at their defaults, fx/fy match cx/cy, so the gradient looks like plain concentric rings. Offsetting fx/fy away from the center pushes the brightest point off to one side, which is exactly how a convincing 3D sphere or a glossy highlight on a button is faked in pure SVG.
Example
<!DOCTYPE html>
<html>
<body>
<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'>
<defs>
<radialGradient id='sphere' cx='50%' cy='50%' r='55%' fx='32%' fy='28%'>
<stop offset='0%' stop-color='#ffffff'/>
<stop offset='35%' stop-color='#7fb8f0'/>
<stop offset='100%' stop-color='#1c4f8c'/>
</radialGradient>
</defs>
<circle cx='100' cy='100' r='85' fill='url(#sphere)'/>
</svg>
</body>
</html>Radial gradients also support gradientUnits="userSpaceOnUse" for absolute coordinates and spreadMethod (pad, reflect, repeat) for what happens beyond r, exactly like linear gradients. There's no separate rx/ry pair for an elliptical glow - to stretch a radial gradient into an ellipse, apply a gradientTransform that scales one axis more than the other.
Example
<!DOCTYPE html>
<html>
<body>
<svg viewBox='0 0 300 200' xmlns='http://www.w3.org/2000/svg'>
<defs>
<radialGradient id='vignette' gradientUnits='userSpaceOnUse' cx='150' cy='100' r='160'>
<stop offset='60%' stop-color='#000000' stop-opacity='0'/>
<stop offset='100%' stop-color='#000000' stop-opacity='0.65'/>
</radialGradient>
</defs>
<rect x='0' y='0' width='300' height='200' fill='#7ec9e0'/>
<rect x='0' y='0' width='300' height='200' fill='url(#vignette)'/>
</svg>
</body>
</html>- Set fx/fy away from cx/cy to fake a light source and give flat circles a sense of volume.
- Use userSpaceOnUse when the gradient needs to line up with the whole canvas rather than a single shape's bounding box, such as a vignette.
- Layer a mostly-transparent radial gradient over other content, as in the vignette example, to darken or lighten the edges of a scene.
- Keep r large enough that the last stop's color actually reaches the edge of the shape, or the outer color will look clipped.
Exercise: SVG Radial Gradient
How does a radial gradient's color transition differ from a linear gradient's?
