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 a tag. 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.