SVG Radial Gradient (radialGradient) - Learn HTML

Description of the `<radialGradient>` element

A radial gradient transitions colors outward from a central point in a circular pattern, like ripples spreading from a stone dropped in water. The <radialGradient> element specifies such a gradient, which can be applied to fill and stroke graphical elements.

This page covers what makes a radial gradient different from a linear one, how to define color stops, and how the gradientUnits and spreadMethod attributes control the result. If you are new to SVG, start with the SVG introduction first.

The <radialGradient> element must be nested inside a <defs> element, which stands for definitions. The <defs> element holds reusable definitions (such as gradients) that are not drawn on their own — they are referenced by other elements. You apply the gradient by giving the <radialGradient> an id and then referencing it with fill="url(#id)" (or stroke="url(#id)").

How a radial gradient is defined

This is what sets radial apart from linear gradients. A radial gradient is defined by two circles:

An end circle, set by cx, cy (its center) and r (its radius). The gradient finishes — reaches its last color stop — at the edge of this circle.
A focal point, set by fx, fy. This is where the gradient starts (its first color stop). The gradient radiates outward from the focal point until it reaches the end circle.

When fx/fy match cx/cy, the gradient is perfectly concentric. When you move the focal point away from the center, the gradient looks off-center — useful for simulating a light source or a 3D sphere highlight. If you omit fx/fy, they default to the values of cx/cy.

Color stops

The colors of a gradient are described by one or more <stop> elements nested inside the <radialGradient>. Each stop has these attributes:

offset — where the stop sits along the gradient, from 0% (the focal point) to 100% (the edge of the end circle). You can also use a number from 0 to 1.
stop-color — the color at that offset (any CSS color value).
stop-opacity — the opacity at that offset, from 0 (transparent) to 1 (opaque).

Danger

Do not confuse an SVG radial gradient with the CSS radial-gradient function. CSS gradients can be applied to the background of any element, whereas SVG gradients only apply to SVG elements.

Example of the SVG `<radialGradient>` element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="300">
      <defs>
        <radialGradient id="example" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
          <!-- Center: transparent -->
          <stop offset="0%" stop-color="rgb(245,245,245)" stop-opacity="0" />
          <!-- Edge: solid light green -->
          <stop offset="100%" stop-color="rgb(144, 238, 144)" stop-opacity="1" />
        </radialGradient>
      </defs>
      <ellipse cx="250" cy="100" rx="95" ry="65" fill="url(#example)" /> Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Try it Yourself »

Example with an off-center focal point

Moving fx/fy away from cx/cy shifts where the gradient begins. Here the focal point is pushed toward the upper-left of the circle, which makes the shape read like a lit sphere — the highlight is near the focal point and the color deepens toward the end circle:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="300">
      <defs>
        <!-- End circle centered at 50%/50%; focal point shifted to 35%/35% -->
        <radialGradient id="sphere" cx="50%" cy="50%" r="50%" fx="35%" fy="35%">
          <stop offset="0%" stop-color="rgb(255, 255, 255)" />
          <stop offset="100%" stop-color="rgb(30, 80, 200)" />
        </radialGradient>
      </defs>
      <circle cx="200" cy="150" r="120" fill="url(#sphere)" />
    </svg>
  </body>
</html>

Controlling units with `gradientUnits`

The gradientUnits attribute decides which coordinate system cx, cy, r, fx, and fy are measured in:

objectBoundingBox (the default) — coordinates are relative to the bounding box of the element being filled. Use percentages or fractions (0 to 1), where 50% means the center of the shape. The gradient scales with the shape automatically.
userSpaceOnUse — coordinates use the SVG canvas's own user coordinate system (the same units as the shapes). Use absolute values like cx="200". This is handy when one gradient must be shared by several shapes in a fixed position.

<svg width="400" height="300">
  <defs>
    <radialGradient id="abs" gradientUnits="userSpaceOnUse"
                    cx="200" cy="150" r="120" fx="200" fy="150">
      <stop offset="0%" stop-color="orange" />
      <stop offset="100%" stop-color="purple" />
    </radialGradient>
  </defs>
  <rect x="80" y="30" width="240" height="240" fill="url(#abs)" />
</svg>

Controlling the edges with `spreadMethod`

spreadMethod defines what happens beyond the end circle when the gradient does not cover the whole shape (for example, when r is smaller than the shape, or the focal point is offset):

pad (the default) — the final color stop continues as a solid fill to the edges.
reflect — the gradient is mirrored, repeating outward as ...edge → center → edge → center...
repeat — the gradient restarts from the beginning each time, repeating outward as ...center → edge, center → edge...

<svg width="400" height="150">
  <defs>
    <radialGradient id="rings" cx="50%" cy="50%" r="20%" spreadMethod="repeat">
      <stop offset="0%" stop-color="white" />
      <stop offset="100%" stop-color="teal" />
    </radialGradient>
  </defs>
  <rect x="0" y="0" width="400" height="150" fill="url(#rings)" />
</svg>

Attributes

Attribute	Description
cx	Specifies the x coordinate of the end circle for the gradient.
cy	Specifies the y coordinate of the end circle for the gradient.
r	Specifies the radius of the end circle for the gradient.
fx	Specifies the x coordinate of the start circle for the gradient.
fy	Specifies the y coordinate of the start circle for the gradient.
gradientUnits	Specifies the coordinate system for `cx`, `cy`, `r`, `fx`, and `fy`. Values: `objectBoundingBox` (default) or `userSpaceOnUse`.
gradientTransform	Gives additional transformation to the coordinate system of the gradient.
href	A URL reference to a different “radialGradient” or a “linearGradient” element.
spreadMethod	Specifies how the gradient behaves when it starts or ends within the bounds of the objects containing the gradient. Values: `pad`, `repeat`, or `reflect`.

The SVG <radialGradient> element also supports the Global Attributes and Event Attributes.

SVG linear gradient — the other gradient type, defined by a direction rather than two circles.
SVG introduction — the basics of working with SVG in HTML.
SVG reference — a full list of SVG elements and attributes.

Practice

Which attributes define the focal point (start) of an SVG radial gradient?

fx, fycx, cyx1, y1dx, dy

Description of the <radialGradient> element

How a radial gradient is defined

Color stops

Example of the SVG <radialGradient> element: