Computer Graphics

While linear gradients interpolate colors in one direction, radial gradients interpolate colors in all directions from a focal point (for example, radiating outward from the center of a circle).

With both types of gradients, colors past the last stop are not extrapolated, but rather are set to the last stop color (or optionally repeated). Radial gradients are declared as a circle. By default, colors outside of the gradient circle are set to the color of the last stop.

We give examples with a circle shape.

<svg width="100" height="100"
   xmlns="http://www.w3.org/2000/svg">

   <defs>
      <radialGradient id="radialgrad1">

         <stop offset="0%" stop-color="yellow" />
         <stop offset="100%" stop-color="coral" />

      </radialGradient>
   </defs>

   <circle cx="50" cy="50" r="45" fill="url(#radialgrad1)" />

</svg>

Changing the stop element offset values from 0 and 100 percent, to 40 and 50 respectively, causes color values before and after the first and last stops to be set to those stops:

<svg width="100" height="100"
   xmlns="http://www.w3.org/2000/svg">

   <defs>
      <radialGradient id="radialgrad2">

         <stop offset="40%" stop-color="yellow" />
         <stop offset="50%" stop-color="coral" />

      </radialGradient>
   </defs>

   <circle cx="50" cy="50" r="45" fill="url(#radialgrad2)" />

</svg>

Colors before the first stop are set to the first stop color, and colors after the last stop are set to the last stop color.

Setting the stops offsets further apart (to 30 and 50 percent instead of 40 and 50) provides more transition between the stop colors.

<svg width="100" height="100"
   xmlns="http://www.w3.org/2000/svg">

   <defs>
      <radialGradient id="radialgrad3">

         <stop offset="30%" stop-color="yellow" />
         <stop offset="50%" stop-color="coral" />

      </radialGradient>
   </defs>

   <circle cx="50" cy="50" r="45" fill="url(#radialgrad3)" />

</svg>

In the preceding examples, the gradiant circle coincides with the circle shape that is drawn, and colors are interpolated outward from the center of the circle. The point from which colors radiate outward is called the focal point of the gradient. By default, the focal point is at the center of the gradient circle, as illustrated above.

The default focal point is halfway across and halfway down the gradient circle (50 percent each). This may be changed by setting the fx and fy attribute values of the radialGradient element to values other than 50 percent (in the following example, both set to 30 percent):

<svg width="100" height="100"
   xmlns="http://www.w3.org/2000/svg">

   <defs>
      <radialGradient id="radialgrad4" fx="30%" fy="30%">

         <stop offset="30%" stop-color="yellow" />
         <stop offset="50%" stop-color="coral" />

      </radialGradient>
   </defs>

   <circle cx="50" cy="50" r="45" fill="url(#radialgrad4)" />

</svg>

The examples above had the gradient circle coincide with the circle shape that is drawn. We now change the position of the radial gradient.

This example will go back to using the default focal point values. By not setting the fx and fy attributes, the default focal point values are used (50 percent each).

Instead of setting focal point values, this example sets the cx and cy attribute values of the linearGradient element, to move (translate) the center of the gradient circle away from the center of the circle that is drawn.

The default cx and cy attribute values are 50 percent each. The following example changes both of those values to 37 percent.

<svg width="100" height="100"
   xmlns="http://www.w3.org/2000/svg">

   <defs>
      <radialGradient id="radialgrad5" cx="37%" cy="37%">

         <stop offset="30%" stop-color="yellow" />
         <stop offset="50%" stop-color="coral" />

      </radialGradient>
   </defs>

   <circle cx="50" cy="50" r="45" fill="url(#radialgrad5)" />

</svg>

Mozilla Developer Network