SVG Radial Gradients

SVG Radial Gradient - <radialGradient>

The <radialGradient> element is used to define a radial gradient (a circular transition from one color to another, from one direction to another).

The gradient definitions are placed within the <defs> or the <svg> element. The <defs> element is short for "definitions", and contains definition of special elements (such as gradients).

Each gradient must have an id attribute which identifies the gradient. The graphic/image then points to the gradient to use.

Radial Gradient 1

An ellipse with a radial gradient that goes from red to blue:

Here is the SVG code:

Code explanation:

• The id attribute of the <radialGradient> element defines a unique name for the gradient
• The cx and cy attributes define the x and position of the end circle of the radial gradient
• The fx and fy attributes define the x and position of the start circle of the radial gradient
• The r attribute define the radius of the end circle of the radial gradient
• The colors of a gradient are defined with two or more <stop> elements
• The offset attribute in <stop> defines where the gradient stop is placed
• The stop-color attribute in <stop> defines the color of the gradient stop
• The fill attribute of the <ellipse> element points the element to the "grad1" gradient

Radial Gradient 2

An ellipse with a radial gradient that goes from red to green to blue:

Here is the SVG code:

Radial Gradient 3

An ellipse with a radial gradient that goes from red to blue (here we have set the x and y position of the end circle to 25%):

Here is the SVG code:

Radial Gradient 4 - spreadMethod="reflect"

An ellipse with a radial gradient that goes from red to blue with spreadMethod="reflect":

Here is the SVG code:

Radial Gradient 5 - spreadMethod="repeat"

An ellipse with a radial gradient that goes from red to blue with spreadMethod="repeat":

Here is the SVG code:

Radial Gradient 6

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

Here is the SVG code:

Code explanation:

• The stop-opacity attribute in <stop> defines the opacity of the color of the gradient stop

SVG <radialGradient> Attributes