<radialGradient>
================

The **`<radialGradient>`** element lets authors define radial gradients that can be applied to fill or stroke of graphical elements.

**Note:** Don't be confused with CSS `radial-gradient()` as CSS gradients can only apply to HTML elements where SVG gradient can only apply to SVG elements.

Example
-------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg
 viewBox="0 0 10 10"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <radialGradient id="myGradient">
      <stop offset="10%" stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </radialGradient>
  </defs>

  <!-- using my radial gradient -->
  <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>
```

Attributes
----------

`cx`

 This attribute defines the x coordinate of the end circle of the radial gradient.
 *Value type*: **<length>** ; *Default value*: `50%`; *Animatable*: **yes**

`cy`

 This attribute defines the y coordinate of the end circle of the radial gradient.
 *Value type*: **<length>** ; *Default value*: `50%`; *Animatable*: **yes**

`fr`

 This attribute defines the radius of the start circle of the radial gradient. The gradient will be drawn such that the 0% `<stop>` is mapped to the perimeter of the start circle.
 *Value type*: **<length>** ; *Default value*: `0%`; *Animatable*: **yes**

`fx`

 This attribute defines the x coordinate of the start circle of the radial gradient.
 *Value type*: **<length>** ; *Default value*: Same as `cx`; *Animatable*: **yes**

`fy`

 This attribute defines the y coordinate of the start circle of the radial gradient.
 *Value type*: **<length>** ; *Default value*: Same as `cy`; *Animatable*: **yes**

`gradientUnits`

 This attribute defines the coordinate system for attributes `cx`, `cy`, `r`, `fx`, `fy`, `fr`
*Value type*: `userSpaceOnUse`|`objectBoundingBox` ; *Default value*: `objectBoundingBox`; *Animatable*: **yes**

`gradientTransform`

 This attribute provides additional transformation to the gradient coordinate system.
 *Value type*: **<transform-list>** ; *Default value*: *identity transform*; *Animatable*: **yes**

`href`

 This attribute defines a reference to another `<radialGradient>` element that will be used as a template.
 *Value type*: **<URL>** ; *Default value*: none; *Animatable*: **yes**

`r`

 This attribute defines the radius of the end circle of the radial gradient. The gradient will be drawn such that the 100% `<stop>` is mapped to the perimeter of the end circle.
 *Value type*: **<length>** ; *Default value*: `50%`; *Animatable*: **yes**

`spreadMethod`

 This attribute indicates how the gradient behaves if it starts or ends inside the bounds of the shape containing the gradient.
 *Value type*: `pad`|`reflect`|`repeat` ; *Default value*: `pad`; *Animatable*: **yes**

`xlink:href` 
Deprecated

 An <IRI> reference to another `<radialGradient>` element that will be used as a template.
 *Value type*: **<IRI>** ; *Default value*: none; *Animatable*: **yes**

### Global attributes

Core Attributes

Most notably: `id`

Styling Attributes
`class`, `style`
Event Attributes

Global event attributes, Document element event attributes

Presentation Attributes

Most notably: `clip-path`, `clip-rule`, `color`, `color-interpolation`, `color-rendering`, `cursor`, `display`, `fill`, `fill-opacity`, `fill-rule`, `filter`, `mask`, `opacity`, `pointer-events`, `shape-rendering`, `stroke`, `stroke-dasharray`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin`, `stroke-miterlimit`, `stroke-opacity`, `stroke-width`, `transform`, `vector-effect`, `visibility`

XLink Attributes
`xlink:href` 
Deprecated
, `xlink:title`
Usage notes
-----------

|  |  |
| --- | --- |
| Categories | Gradient element |
| Permitted content | Any number of the following elements, in any order:Descriptive elements`<animate>`, `<animateTransform>`, `<set>`, `<stop>` |

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # RadialGradients |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.