Docs4dev
Docs
svg / latest / element / radialgradient.html

<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

<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: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

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:href, 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

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
radialGradient 1 12 1.5 9 9 3.1 3 18 4 Yes 2 1.0
cx No No No No No No No No No No No No
cy No No No No No No No No No No No No
fr No No No No No No No No No No No No
fx No No No No No No No No No No No No
fy No No No No No No No No No No No No
gradientTransform No No No No No No No No No No No No
gradientUnits No No No No No No No No No No No No
href No No No No No No No No No No No No
r No No No No No No No No No No No No
spreadMethod No No No No No No No No No No No No
xlink_href No No No No No No No No No No No No

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/radialGradient