SVG Gradients - Radial

SVG Radial Gradient - <radialGradient>

The <radialGradient> element is used to define a radial gradient.

The <radialGradient> element must be nested within a <defs> tag. The <defs> tag is short for definitions and contains definition of special elements (such as gradients).

Example 1

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

Here is the SVG code:

Code explanation:

• 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
• The color range for a gradient can be composed of two or more colors. Each color is specified with a <stop> tag. The offset attribute is used to define where the gradient color begin and end
• The fill attribute links the ellipse element to the gradient

Example 2

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

Here is the SVG code: