CSS repeating-conic-gradient() Function
Last Updated :
05 Jul, 2023
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>GeeksforGeeks</h1>
<div class="container a"></div>
</body>
</html>
|
Output:
repeating conical gradient
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...