Skip to content
W3S101

SVG Radial

SVG Gradients - Radial

Section titled “SVG Gradients - Radial”

SVG Radial Gradient -

Section titled “SVG Radial Gradient - ”

The <radialGradient> element is used to define a radial gradient fill or stroke. A radial gradient transitions colors outwards from a central focal point to the edges of an outer circle.

The <radialGradient> element must be nested within a <defs> (definitions) tag. The <defs> tag is a container for reusable graphical objects, such as gradients, patterns, and filters. These definitions are not rendered directly but can be referenced by other elements.

Example 1: Basic Radial Gradient

Section titled “Example 1: Basic Radial Gradient”

This example defines an ellipse filled with a radial gradient that transitions from transparent white at the center to opaque blue at the edges.

Sorry, your browser does not support inline SVG.

Here is the SVG code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Radial Gradient Example 1</title>
</head>
<body>
  <svg width="500" height="150">
    <defs>
      <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
        <stop offset="0%" style="stop-color:white; stop-opacity:0" />
        <stop offset="100%" style="stop-color:blue; stop-opacity:1" />
      </radialGradient>
    </defs>
    <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  </svg>
</body>
</html>

Code Explanation:

  • &lt;defs&gt;: Contains the gradient definition.
  • &lt;radialGradient id="grad1"&gt;: Defines the radial gradient and assigns it a unique ID, “grad1”, so it can be referenced.
  • cx, cy, r: These attributes define the outer circle of the gradient. cx and cy are the center coordinates, and r is the radius. Values can be percentages (relative to the object’s bounding box) or absolute numbers.
  • fx, fy: These attributes define the coordinates of the focal point of the gradient (where the 0% stop is mapped). If omitted, they default to the values of cx and cy.
  • &lt;stop&gt;: Defines a color stop in the gradient. It has an offset attribute (0% to 100%, or 0 to 1) indicating where the color is positioned along the gradient vector.
  • style="stop-color:white; stop-opacity:0": Specifies the color and opacity at that stop. Alternatively, stop-color and stop-opacity can be used as separate attributes.
  • fill="url(#grad1)": The fill attribute on the &lt;ellipse&gt; element links it to the gradient definition using its ID.

Example 2: Radial Gradient with a Shifted Focal Point

Section titled “Example 2: Radial Gradient with a Shifted Focal Point”

This example demonstrates how changing the cx, cy, and r attributes, or shifting the focal point (fx, fy), affects the gradient’s appearance. Here, the gradient’s outer circle and focal point are adjusted.

Sorry, your browser does not support inline SVG.

Here is the SVG code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Radial Gradient Example 2</title>
</head>
<body>
  <svg width="500" height="150">
    <defs>
      <radialGradient id="grad2" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
        <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
        <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1" />
      </radialGradient>
    </defs>
    <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
  </svg>
</body>
</html>

Key Takeaway: Radial gradients provide a powerful way to create depth and realistic lighting effects in SVG. Experiment with different stop colors, opacities, and coordinate attributes (cx, cy, r, fx, fy) to achieve various visual outcomes.

For more advanced gradient control, explore attributes like gradientUnits (userSpaceOnUse or objectBoundingBox) and spreadMethod (pad, reflect, repeat).