SVG <radialGradient> Element

Last Updated : 17 Jul, 2023

SVG <radialGradient> element allows the developer to define linear gradients to apply SVG elements. It allows a smooth transition from one color type to another. SVG is the most reliable technique.

Attributes :

gradientUnits: This attribute denotes the coordinate system used for attributes specified on the gradient elements.
href: This attribute makes the image or text clickable.
spreadMethod: This attribute denotes determines how a shape is filled beyond the defined edges of a gradient.
gradientTransform: This attribute provides additional transformation to the gradient coordinate system.
cx: It denotes the x coordinate of the end circle with a radial gradient.
cy: This attribute denotes the y coordinate of the end circle with radial gradient
r: It denotes the radius of the end circle with radial gradient
fr: It denotes the radius of the start circle with a radial gradient.
fx: It denotes the x coordinate of the start circle with a radial gradient.
fy: It denotes the y coordinate of the start circle with a radial gradient.

The gradient is defined inside <defs> tag.

Syntax:

<radialGradient id="id1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">

Note: The id attribute must be unique for the gradient. The r attribute will represent the radius of the gradient. cx and cy represent the center of the gradient. fx and fy define the starting and ending of the focal point of the gradient.

offset: It defines the gradient of the largest circle ranging from 0% to 100%.
stop-color: It represents the color at the offset.
stop-opacity: It represents the opacity of offset color ranging from 0% to 100%.

<stop offset="0%" style="stop-color:rgb(78, 206, 19); stop-opacity:0" />

The fill attribute links the ellipse element to the gradient.

<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#id1)" />

Example 1: The following code defines an ellipse with a radial gradient from dark green to light green.

HTML

<!DOCTYPE html>
<html lang="en">
    <h1 style="color:green">GeeksforGeeks</h1>
    <svg height="150" width="500">
        <defs>
          <radialGradient id="id1" cx="50%" cy="50%"
                          r="50%" fx="50%" fy="50%">
           
            <stop offset="0%" style="stop-color:rgb(78, 206, 19); 
                                     stop-opacity:0" />
            <stop offset="100%" style="stop-color:rgb(29, 90, 0);
                                       stop-opacity:1" />
             
          </radialGradient>
        </defs>
        <ellipse cx="100" cy="70" rx="85" ry="55"
                 fill="url(#id1)" />
    </svg>
</html>

Output:

SVG <radialGradient> Element

Example 2: The following code defines another ellipse with a radial gradient from blue to green.

HTML

<!DOCTYPE html>
<html lang="en">
    <h1 style="color:green">GeeksforGeeks</h1>
    <svg width="660" height="330">
        <defs>
          <radialGradient id="radial" fx="50%" fy="50%"
                          cx="50%" cy="50%" r="75%">
            <stop offset="0%"
                  style="stop-color:rgb(78, 206, 19);
                         stop-opacity:0" />
            <stop offset="100%" style="stop-color:rgb(0, 56, 119);
                                       stop-opacity:1" />
          </radialGradient>
        </defs>
        
        <rect x="0" y="0" width="600" height="300"
              fill="url(#radial)" />
    </svg>
</html>