SVG Radial Gradient

SVG radial gradient is used to represent the circular transition of one color to another.

The <radialGradient> element defines the radial gradient. We can use the <radialGradient> element within <defs> element.

Example

<!DOCTYPE html>
<html>
<body>

<svg height="450" width="450">
  <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="250" cy="100" rx="120" ry="70" fill="url(#grad1)" />
</svg>

</body>
</html>

Test it Now

Explanation

The id attribute defines a unique name for the gradient.
The fx and fy define the innermost circle and cx, cy and r attributes define the outermost circle.
A gradients color range may be composed of two or more colors and each color contains atag. The offset attribute define that where the gradient color start and end.
The fill attribute is used to link the element of eclipse to the gradient.