radial-gradient()

Read More at MDN DocsView Spec

Safe to Use

radial-gradient() is considered safe to use.

It’s supported by 94% of global browsers.

Browsers

ChromeMar 26, 2013v26.0.0
26%╱100%
100% of Chrome users are running a supported version.
SafariOct 22, 2013v7.0.0
5%╱100%
100% of Safari users are running a supported version.
EdgeJul 28, 2015v12.0.0
5%╱100%
100% of Edge users are running a supported version.
FirefoxOct 9, 2012v16.0.0
3%╱100%
100% of Firefox users are running a supported version.

Version Breakdown

 
Agent
Support
Adoption
Chrome
Mar 26, 2013 v26.0.0
26%╱100%
100% of Chrome users are running a supported version.
Mar 26, 2013 – Latest
v26.0.0+
26%╱100%

Full Support

Aug 2, 2011 – Latest
v13.0.0+
26%╱100%

Implemented with the vendor prefix: -webkit-

Chrome Android
Apr 3, 2013 v26.0.0
36%╱100%
100% of Chrome Android users are running a supported version.
Apr 3, 2013 – Latest
v26.0.0+
36%╱100%

Full Support

Jun 27, 2012 – Latest
v18.0.0+
36%╱100%

Implemented with the vendor prefix: -webkit-

Edge
Jul 28, 2015 v12.0.0
5%╱100%
100% of Edge users are running a supported version.
Jul 28, 2015 – Latest
v12.0.0+
5%╱100%

Full Support

Firefox
Oct 9, 2012 v16.0.0
3%╱100%
100% of Firefox users are running a supported version.
Oct 9, 2012 – Latest
v16.0.0+
3%╱100%

Full Support

Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.

Sep 20, 2016 – Latest
v49.0.0+
3%╱100%

Implemented with the vendor prefix: -webkit-

Jan 21, 2010 – Latest
v3.6.0+
3%╱100%

Implemented with the vendor prefix: -moz-

Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.

Firefox for Android
Oct 9, 2012 v16.0.0
Firefox for Android supports this feature.
Oct 9, 2012 – Latest
v16.0.0+

Full Support

Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.

Sep 20, 2016 – Latest
v49.0.0+

Implemented with the vendor prefix: -webkit-

Mar 29, 2011 – Latest
v4.0.0+

Implemented with the vendor prefix: -moz-

Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.

Internet Explorer
Oct 26, 2012 v10.0.0
0%╱83%
There are no users of Internet Explorer running a supported version.
Oct 26, 2012 – Latest
v10.0.0+
0%╱83%

Full Support

Internet Explorer 5.5 through 9.0 supported gradients via a proprietary filter: -ms-filter: progid:DXImageTransform.Microsoft.Gradient().

 
Quest Browser
Unknown v5.0.0
Quest Browser supports this feature.
Unknown
v5.0.0+

Full Support

Unknown
v5.0.0+

Implemented with the vendor prefix: -webkit-

Opera
Nov 20, 2012 v12.1.0
1%╱100%
100% of Opera users are running a supported version.
Nov 20, 2012 – Latest
v12.1.0+
1%╱100%

Full Support

Jul 2, 2013 – Latest
v15.0.0+
1%╱100%

Implemented with the vendor prefix: -webkit-

Dec 6, 2011 – Jul 2, 2013
v11.6.0 – v15.0.0

Implemented with the vendor prefix: -o-

Opera Android
Oct 9, 2012 v12.1.0
Opera Android supports this feature.
Oct 9, 2012 – Latest
v12.1.0+

Full Support

May 21, 2013 – Latest
v14.0.0+

Implemented with the vendor prefix: -webkit-

Feb 25, 2012 – May 21, 2013
v12.0.0 – v14.0.0

Implemented with the vendor prefix: -o-

Safari
Oct 22, 2013 v7.0.0
5%╱100%
100% of Safari users are running a supported version.
Oct 22, 2013 – Latest
v7.0.0+
5%╱100%

Full Support

Jul 20, 2011 – Latest
v5.1.0+
5%╱100%

Implemented with the vendor prefix: -webkit-

Safari 4 was supporting an experimental -webkit-gradient(radial,…) function. This old outdated syntax is still supported for compatibility purposes.

Safari on iOS
Sep 18, 2013 v7.0.0
17%╱100%
There are no users of Safari on iOS running a supported version.
Sep 18, 2013 – Latest
v7.0.0+
17%╱100%

Full Support

Oct 12, 2011 – Latest
v5.0.0+
17%╱100%

Implemented with the vendor prefix: -webkit-

Safari 4 was supporting an experimental -webkit-gradient(radial,…) function. This old outdated syntax is still supported for compatibility purposes.

Samsung Internet
Sep 25, 2013 v1.5.0
2%╱100%
100% of Samsung Internet users are running a supported version.
Sep 25, 2013 – Latest
v1.5.0+
2%╱100%

Full Support

Apr 27, 2013 – Latest
v1.0.0+
2%╱100%

Implemented with the vendor prefix: -webkit-

WebView Android
Sep 3, 2014 v37.0.0
WebView Android supports this feature.
Sep 3, 2014 – Latest
v37.0.0+

Full Support

Sep 3, 2014 – Latest
v37.0.0+

Implemented with the vendor prefix: -webkit-

See Also

Contribute