SVG Tutorials

SVG Radial Gradient in HTML

SVG Radial Gradient in HTML



All SVG filters are defined by < defs > element. It is used for the definition of the filter which is to be used.

The < filter > element is used to define an SVG filter. The element has a required id attribute that identifies the filter.

gradient is a smooth transition from one color to another. Moreover, we can apply several color transitions to the same element.

The < radialGradient > element is used to define a radial gradient. Like filters, it must also be nested in < defs > tag.


Code explanation of code below is as:-


  • The id attribute of the < radialGradient > tag defines a unique name for the gradient.
  • The cx, cy, and r attributes define the outermost circle, and the fx and fy define the innermost circle.
  • Each color is specified with a < stop > tag. The offset attribute is used to define where the gradient color begins and ends.
  • The fill attribute links the ellipse element to the gradient.

Code Explanation

All Tutorials related to SVG Tutorials

All Sections related to SVG