CSS repeating-radial-gradient()

The CSS repeating-radial-gradient() function is used to define the background-image property, to do the similar job as of radial-gradient(), except that, it repeats the color stops for 100/percentageOfLastColorStop times. For example:

HTML with CSS Code

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

Output

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

CSS repeating-radial-gradient() Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #a, #b, #c, #d, #e, #f, #g {height: 220px;}
      #a {background-image: repeating-radial-gradient(red, green, black, purple 25%);}
      #b {background-image: repeating-radial-gradient(circle, red, green, black, purple 25%);}
      #c {background-image: repeating-radial-gradient(closest-side, red, green, black, purple 25%);}
      #d {background-image: repeating-radial-gradient(closest-corner, red, green, black, purple 25%);}
      #e {background-image: repeating-radial-gradient(farthest-side, red, green, black, purple 25%);}
      #f {background-image: repeating-radial-gradient(at 70%, red, green, black, purple 25%);}
      #g {background-image: repeating-radial-gradient(circle farthest-side at 70%, red, green, black, purple 25%);}
   </style>
</head>
<body>
   
   <h3>background-image: repeating-radial-gradient(red, green, black, purple 25%)</h3>
   <div id="a">
   </div>

   <h3>background-image: repeating-radial-gradient(circle, red, green, black, purple 25%)</h3>
   <div id="b">
   </div>
   
   <h3>background-image: repeating-radial-gradient(closest-side, red, green, black, purple 25%)</h3>
   <div id="c">
   </div>
   
   <h3>background-image: repeating-radial-gradient(closest-corner, red, green, black, purple 25%)</h3>
   <div id="d">
   </div>
   
   <h3>background-image: repeating-radial-gradient(farthest-side, red, green, black, purple 25%)</h3>
   <div id="e">
   </div>
   
   <h3>background-image: repeating-radial-gradient(at 70%, red, green, black, purple 25%)</h3>
   <div id="f">
   </div>
   
   <h3>background-image: repeating-radial-gradient(circle farthest-side at 70%, red, green, black, purple 25%)</h3>
   <div id="g">
   </div>
   
</body>
</html>

Output

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

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

background-image: repeating-radial-gradient(closest-side, red, green, black, purple 25%)

background-image: repeating-radial-gradient(closest-corner, red, green, black, purple 25%)

background-image: repeating-radial-gradient(farthest-side, red, green, black, purple 25%)

background-image: repeating-radial-gradient(at 70%, red, green, black, purple 25%)

background-image: repeating-radial-gradient(circle farthest-side at 70%, red, green, black, purple 25%)

CSS Online Test

« Previous Tutorial Next Tutorial »