Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

Next-Gen App & Browser
Testing Cloud

Trusted by 2 Mn+ QAs & Devs to accelerate their release cycles

Start free with Google Start free with Email

CSS Conical Gradients

The css-conic-gradient is a method, using the background-image property and repeating-linear-gradient function to define conical or repeating conical gradients as colors in CSS.

Last updated on : 2023-03-20

Browser Versions

Edge

Firefox

Chrome

Safari

Opera

5.5 - 11

12 - 18

79 - 111

2 - 82

83 - 113

4 - 68

69 - 114

3.2 - 12

12.1 - 16.4

9.5 - 63

64 - 95

Fully Supported

Partially

No Support

Specifications

CSS Image Values and Replaced Content Module Level 4 # conic-gradients

Syntax

/* A conic gradient rotated 45 degrees, starting blue and finishing red */
 conic-gradient(from 45deg, blue, red);
 /* A bluish purple box: the gradient goes from blue to red, but only the bottom right quadrant is visible, as the center of the conic gradient is at the top left corner */
 conic-gradient(from 90deg at 0 0, blue, red);
 /* Colorwheel */
 background: conic-gradient( hsl(360, 100%, 50%), hsl(315, 100%, 50%), hsl(270, 100%, 50%), hsl(225, 100%, 50%), hsl(180, 100%, 50%), hsl(135, 100%, 50%), hsl(90, 100%, 50%), hsl(45, 100%, 50%), hsl(0, 100%, 50%) );

Browser Compatibility

CSS Conical Gradients on IE is not supported on any IE versions.

CSS Conical Gradients on Edge is fully supported on 79-111, and not supported on 12-18 Edge versions.

CSS Conical Gradients on Firefox is fully supported on 83-113, and not supported on 2-82 Firefox versions.

CSS Conical Gradients on Chrome is fully supported on 69-114, and not supported on 4-68 Chrome versions.

CSS Conical Gradients on Safari is fully supported on 12.1-16.4, and not supported on 3.2-12 Safari versions.

CSS Conical Gradients on Opera is fully supported on 64-95, and not supported on 9.5-63 Opera versions.

CSS Conical Gradients on Safari on iOS is fully supported on 12.2-16.4, and not supported on 3.2-12 Safari on iOS versions.

CSS Conical Gradients on Android Browser is fully supported on 97-111, and not supported on 2.1-4 Android Browser versions.

CSS Conical Gradients on Opera Mobile is fully supported on 64-73, and not supported on 10-12 Opera Mobile versions.

CSS Conical Gradients on Chrome for Android is fully supported on all Chrome for Android versions.

CSS Conical Gradients on Firefox for Android is fully supported on all Firefox for Android versions.

CSS Conical Gradients on Samsung Internet is fully supported on 10.1-20, and not supported on 4-9.2 Samsung Internet versions.

Browser Support for CSS Conical Gradients

CSS Conical Gradients on Chrome

CSS Conical Gradients on Safari

CSS Conical Gradients on Firefox

CSS Conical Gradients on Internet Explorer

CSS Conical Gradients on Opera

CSS Conical Gradients on Edge

References

Data sourced from

High

Overall Browser Compatibility Score

Note:CSS Conical Gradients shows a browser compatibility score of 88. This is a collective score out of 100 to represent browser support of a web technology. The higher this score is, the greater is the browser compatibility. The browser compatibility score is not a 100% reflection for every browser and the web technology support. However, it does give you an estimate on how much you should rely on a particular web technology in terms of browser compatibility.

Test on 3000+ browsers for CSS Conical Gradients & more

Test your website for CSS Conical Gradients and other web technologies. Get 100 FREE automation test minutes!

Test Now