Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

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:

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
Try it Yourself »

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:

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="red" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>
Try it Yourself »

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%):

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad3" cx="25%" cy="25%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad3)" />
</svg>
Try it Yourself »

Radial Gradient 4 - spreadMethod="reflect"

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

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad4" cx="25%" cy="25%" spreadMethod="reflect">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad4)" />
</svg>
Try it Yourself »

Radial Gradient 5 - spreadMethod="repeat"

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

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad5" cx="25%" cy="25%" spreadMethod="repeat">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad5)" />
</svg>
Try it Yourself »

Radial Gradient 6

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

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad6" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="red" stop-opacity="0" />
      <stop offset="100%" stop-color="blue" stop-opacity="1" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad6)" />
</svg>
Try it Yourself »

Code explanation:

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

SVG <radialGradient> Attributes

Attribute Description
id Required. Defines a unique id for the <radialGradient> element
cx The x position of the end circle of the radial gradient. Default is 50%
cy The y position of the end circle of the radial gradient. Default is 50%
fr The radius of the start circle of the radial gradient. Default is 0%
fx The x position of the start circle of the radial gradient. Default is 50%
fy The y position of the start circle of the radial gradient. Default is 50%
r The radius of the end circle of the radial gradient. Default is 50%
spreadMethod Defines the spread method of the gradient. Possible values: "pad", "reflect", "repeat". Default is "pad"
href Defines a reference to another <radialGradient> element that will be used as a template
gradientUnits Defines the coordinate system for cx, cy, r, fx, fy, fr. Possible values: "userSpaceOnUse" and "objectBoundingBox". Default is "objectBoundingBox"
gradientTransform Defines additional transformation to the gradient coordinate system