"<radialGradient>"

Defines the paint server for a radial gradients.

• DOM object: SVGRadialGradientElement
• SVG2 spec: https://www.w3.org/TR/SVG2/pservers.html#RadialGradients

A <radialGradient> is a paint server that interpolates colors outward from a focal point to an outer circle, producing effects like spotlights, glows, and soft spherical shading. Like "<linearGradient>", it does not draw anything itself; you declare it with an id (usually inside "<defs>") and reference it from another shape's fill or stroke via url(#id). Its child "<stop>" elements define the color ramp, and SVG smoothly interpolates between them based on each pixel's distance from the focal point to the outer circle.

For a straight-line color ramp, use "<linearGradient>" instead.

<radialGradient id="MyGradient">
  <stop offset="0%" stop-color="blue" />
  <stop offset="100%" stop-color="yellow" />
</radialGradient>

To reference it with a fill:

<rect fill="url(#MyGradient)" width="300" height="300" />

Focal point (fx, fy, fr)

By default a radial gradient is symmetric: the colors radiate from the center (cx, cy) out to the outer circle of radius r. Offsetting the focal point with fx/fy shifts the "inner circle" of the gradient, which is how you get a lens-like or spotlight effect — the 0% color appears at (fx, fy) instead of the geometric center, but the 100% color still lives on the outer circle at (cx, cy) with radius r. fr lets the inner circle have its own radius greater than 0, creating an annular (ring-shaped) gradient.

gradientUnits

Like <pattern>, gradientUnits decides whether cx, cy, r, fx, fy, and fr are interpreted as fractions of the filled shape's bounding box (objectBoundingBox, the default) or absolute user-space coordinates (userSpaceOnUse). In the default mode a single gradient definition automatically adapts to any shape's size; in userSpaceOnUse mode the gradient's size and position are fixed in page coordinates regardless of which shape it fills.

Valid child elements: "<stop>"

See also

"<linearGradient>", "<stop>"

Attribute	Default	Description
cx	50%	Center X coordinate, for the outer circle.
cy	50%	Center Y coordinate, for the outer circle.
r	50%	Radius of the outer circle.
fx	cx	Focal point X coordinate.
fy	cy	Focal point Y coordinate.
fr	0	Focal point radius.
gradientUnits	objectBoundingBox	The coordinate system for the gradient, either userSpaceOnUse or objectBoundingBox.
gradientTransform	(none)	A transform to apply to the gradient.
spreadMethod	pad	How to handle colors outside the gradient. Either pad, reflect, or repeat.
href	(none)	A URL reference to a template gradient element, which is then used as a template for this gradient. Example: <radialGradient id="MyGradient" href="#MyGradient2" />