CSS repeating-conic-gradient()

The repeating-conic-gradient() function is used to define the background-image property, to do the similar job as of conic-gradient(), except that, it repeats the color stops to cover the entire container. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #myd {height: 320px; background-image: repeating-conic-gradient(red, green, black, purple 20%);}
   </style>
</head>
<body>
   
   <div id="myd"></div>
   
</body>
</html>

Output

In case of repeating-conic-gradient(), we can use combination of percentage to create required, unique and interactive gradient background.

Giving percentage to only the last color stop, will repeat for 100/percentageOfLastColorStop times. But we can give percentage for multiple colors to change the repetition. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #a, #b, #c, #d, #e, #f, #g, #h {width: 220px; height: 220px;}
      #a {background-image: repeating-conic-gradient(red, green, black, purple 25%);}
      #b {background-image: repeating-conic-gradient(green 10%, black, purple 25%);}
      #c {background-image: repeating-conic-gradient(red 10%, green, black, purple 25%);}
      #d {background-image: repeating-conic-gradient(red, green, black 50%, purple 25%);}
      #e {background-image: repeating-conic-gradient(red 50%, green, black, purple);}
      #f {background-image: repeating-conic-gradient(red, green, black, purple 10%);}
      #g {background-image: repeating-conic-gradient(red, green, black, purple 5%);}
      #h {background-image: repeating-conic-gradient(red, green, black, purple 1%);}
   </style>
</head>
<body>
   
   <h3>background-image: repeating-conic-gradient(red, green, black, purple 25%)</h3>
   <div id="a">
   </div>
   
   <h3>background-image: repeating-conic-gradient(green 10%, black, purple 25%)</h3>
   <div id="b">
   </div>
   
   <h3>background-image: repeating-conic-gradient(red 10%, green, black, purple 25%)</h3>
   <div id="c">
   </div>
   
   <h3>background-image: repeating-conic-gradient(red, green, black 50%, purple 25%)</h3>
   <div id="d">
   </div>
   
   <h3>background-image: repeating-conic-gradient(red 50%, green, black, purple)</h3>
   <div id="e">
   </div>
   
   <h3>background-image: repeating-conic-gradient(red, green, black, purple 10%)</h3>
   <div id="f">
   </div>
   
   <h3>background-image: repeating-conic-gradient(red, green, black, purple 5%)</h3>
   <div id="g">
   </div>
   
   <h3>background-image: repeating-conic-gradient(red, green, black, purple 1%)</h3>
   <div id="h">
   </div>
   
</body>
</html>

Output

background-image: repeating-conic-gradient(red, green, black, purple 25%)

background-image: repeating-conic-gradient(green 10%, black, purple 25%)

background-image: repeating-conic-gradient(red 10%, green, black, purple 25%)

background-image: repeating-conic-gradient(red, green, black 50%, purple 25%)

background-image: repeating-conic-gradient(red 50%, green, black, purple)

background-image: repeating-conic-gradient(red, green, black, purple 10%)

background-image: repeating-conic-gradient(red, green, black, purple 5%)

background-image: repeating-conic-gradient(red, green, black, purple 1%)

CSS Online Test

« Previous Tutorial Next Tutorial »