Description of the <radialGradient> element

The <radialGradient> element specifies an SVG radial gradient that can be applied to fill and stroke graphical elements.

The <radialGradient> element must be nested inside a <defs> element which is a short for definitions. The <defs> element contains definition of specific elements (e.g., gradients).

Do not confuse an SVG radial gradient with the CSS radial-gradient property. CSS gradients only apply to HTML elements, whereas the SVG gradient only applies to SVG elements.

Example of the SVG <radialGradient> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="300">
      <defs>
        <radialGradient id="example" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
          <stop offset="0%" style="stop-color:rgb(245,245,245);stop-opacity:0" />
          <stop offset="100%" style="stop-color:rgb(144, 238, 144);stop-opacity:1" />
        </radialGradient>
      </defs>
      <ellipse cx="250" cy="100" rx="95" ry="65" fill="url(#example)" /> Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Attributes

Attribute Description
cx Specifies the x coordinate of the end circle for the gradient.
cy Specifies the y coordinate of the end circle for the gradient.
r Specifies the radius of the end circle for the gradient.
fr Specifies the radius of the start circle for the gradient.
fx Specifies the x coordinate of the start circle for the gradient.
fy Specifies the y coordinate of the start circle for the gradient.
gradientUnits Specifies the coordinate system for the following attributes: cx, cy, r, fx,fy, and fr.
gradientTransform Gives additional transformation to the coordinate system of the gradient.
href A URL reference to a different “radialGradient” or a “linearGradient” element.
spreadMethod Specifies how the gradient behaves when it starts or ends within the bounds of the objects containing the gradient.

The SVG <radialGradient> element also supports the Global Attributes and Event Attributes.

Practice Your Knowledge

What are the attributes of the 'radialGradient' element in SVG?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?