<radialGradient>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
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-
An <IRI> reference to another
<radialGradient>
element that will be used as a template. Value type: <IRI> ; Default value: none; Animatable: yes
Usage context
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