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.


background-image:repeating-conic-function(from angle, color degree1 degree2, color degree1 degree 2, …);


  • 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.


<!DOCTYPE html>
        .container {
            background-color: green;
            height: 200px;
            width: 200px;
            float: left;
            margin: 20px;
            border-radius: 50%;
        .a {
                    from 10deg, 
                    green 0deg 10deg, 
                    yellow 10deg 20deg
    <div class="container a"></div>


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!