The <radialGradient>
element lets authors define radial gradients that can be applied to fill or stroke of graphical elements.
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.
html,body,svg { height:100% }
<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 linear 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:50%
; Animatable: yes fx
- This attribute defines the x coordinate of the start circle of the radial gradient.
Value type: <length> ; Default value: Same ascx
; Animatable: yes fy
- This attribute defines the y coordinate of the start circle of the radial gradient.
Value type: <length> ; Default value: Same ascy
; Animatable: yes gradientUnits
- This attribute defines the coordinate system for attributes
x1
,x2
,y1
,y2
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
<linearGradient>
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 since SVG 2
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.<linearGradient>
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
,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 | Status | Comment |
---|---|---|
Scalable Vector Graphics (SVG) 2 The definition of '<radialGradient>' in that specification. |
Candidate Recommendation | Added fr attribute |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of '<radialGradient>' in that specification. |
Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
radialGradient | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1.5 | IE Full support 9 | Opera Full support 9 | Safari Full support 3.1 | WebView Android Full support 3 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support 3.1 | Samsung Internet Android Full support 1.0 |
cx | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
cy | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
fr | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
fx | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
fy | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
gradientTransform | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
gradientUnits | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
href | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
r | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
spreadMethod | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
xlink:href | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown
- Deprecated. Not for use in new websites.
- Deprecated. Not for use in new websites.