Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

CSS repeating-conic-gradient() Function

  • Last Updated : 04 Aug, 2021

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, defines the gradient rotation in a clockwise direction.
  • color degree1 degree 2: This parameter holds the color value, followed by 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
  • Internet Explorer: Not supported
  • Mozilla 83.0 and above
  • Opera 56.0 and above
  • Safari 12.1 and above
My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!