Last updated on : 2022-04-10
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.
CSS Image Values and Replaced Content Module Level 4 # conic-gradients
/* 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 Support For Safari on iOS Versions
Browser Support For Android Browser Versions
Browser Support For Chrome for Android Versions
Browser Support For Firefox for Android Versions
Browser Support For Samsung Internet Versions
Test your website on 3000+ real browsers and operating systems for mobile and desktop with the LambdaTest cloud. Perform browser compatibility test for CSS Conical Gradients and many more web technologies that are a part of your website or web-application.
Last Modified date
2022-04-10
Data sourced from
Test this and other features on your website for compatibility across
3,000 real browsers and devices using
I hope we're able to help you build browser compatible web experience.
Fast track your browser testing experience on 3000+ browsers and OS combinations with LambdaTest.
Sarah Elson (Product & Growth Lead)