Home » SVG Radial Gradients

SVG Radial Gradients

by Online Tutorials Library

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

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.

Next TopicSVG Animation

You may also like