Trusted by 1 Mn+ QAs & Devs to accelerate their release cycles
Last updated on : 2023-03-20
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 IE Versions
Browser Support For Edge Versions
Browser Support For Firefox Versions
Browser Support For Chrome Versions
Browser Support For Safari Versions
Browser Support For Opera Versions
Browser Support For Safari on iOS Versions
Browser Support For Android Browser Versions
Browser Support For Opera Mobile Versions
Browser Support For Chrome for Android Versions
Browser Support For Firefox for Android Versions
Browser Support For Samsung Internet Versions
Join the free online conference to decode the future of testing!
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
Data sourced from
Harness the power of Chromium-based engine to deliver responsive websites and web apps.Try for free
Get 100 minutes of automation test minutes FREE!!