SVG Radial Gradients

SVG Radial Gradient - <radialGradient>

<radialGradient> The element is used to define radial gradients (radial gradients).

<radialGradient> The element must be nested inside <defs> inside the tag.<defs> The element is an abbreviation for definition, which includes definitions of special elements (such as filters).

Example 1

Define an ellipse with a radial gradient from white to blue:

This is the SVG code:

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" 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(#grad1)" />
</svg>

Try It Yourself

Code Explanation:

• The id attribute of the <radialGradient> tag defines the unique name of the gradient
• The cx, cy, and r attributes define the outermost circle, and fx and fy define the innermost circle
• The gradient color range can be composed of two or more colors. Each color is specified with a <stop> tag
• The offset attribute is used to define the start and end positions of the gradient color
• The fill attribute links the ellipse element to the gradient

Example 2

Define another ellipse with a radial gradient from white to blue:

This is the SVG code:

<svg height="150" width="500">
  <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>

Try It Yourself