SVG Radial Gradients

• SVG Linear Gradients
• SVG Patterns

A radial gradient radiates colors outward from a central point. Like the glow of a light bulb or a sphere lit from one side. It's defined and used in exactly the same way as a linear gradient.

The radialGradient Element

Instead of a direction vector, radial gradients are controlled by a center point and radius:

• cx: X-coordinate of the gradient's center. Default 50%.
• cy: Y-coordinate of the gradient's center. Default 50%.
• r: The radius of the gradient; how far out it radiates. Default 50%.
• fx, fy: The focal point. This is the true center of the innermost color. When different from cx/cy, this creates an off-center glow effect, useful for simulating a light source hitting a sphere.

Color stops work identically to linearGradient:

• offset="0%" applies to the very center.
• offset="100%" applies to the outermost edge at radius r.

Example: A Glowing Circle

The stop-opacity="0" on the outer stop makes the gradient fade to transparent at the edges, creating a soft glowing effect rather than a hard cutoff.

Linear vs. Radial Gradients

• SVG Linear Gradients
• SVG Patterns