CSS repeating-conic-gradient() Function
The repeating-conic-gradient() function is an inbuilt function in CSS that is used to repeat conic gradients in the background image.
Syntax:
background-image:repeating-conic-function(from angle, color degree1 degree2, color degree1 degree 2, ...);
Parameters:
- angle: This parameter takes an angle as its value, and defines the gradient rotation in a clockwise direction.
- color degree1 degree 2: This parameter holds the color value, followed by the start position(in degrees) and end position(in degrees) respectively.
Example: The following example illustrates the repeating-conic-gradient() function in CSS.
HTML
<!DOCTYPE html> < html > < head > < style > .container { background-color: green; height: 200px; width: 200px; float: left; margin: 20px; border-radius: 50%; } .a { background-image: repeating-conic-gradient(from 10deg, green 0deg 10deg, yellow 10deg 20deg); } </ style > </ head > < body > < h1 >w3wiki</ h1 > < div class = "container a" ></ div > </ body > </ html > |
Output:
Supported Browsers:
- Google Chrome 69.0 and above
- Edge 79 and above
- Internet Explorer not supported
- Mozilla Firefox 83.0 and above
- Opera 56.0 and above
- Safari 12.1 and above
Contact Us