Jobs Hub

Menu

CSS repeating-linear-gradient()

The CSS repeating-linear-gradient() function is used to define the background-image property, to do the similar job as of linear-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 {background-image: repeating-linear-gradient(red, green, black, purple 25%);
            height: 320px;}
   </style>
</head>
<body>
   
   <h3>background-image: repeating-linear-gradient(red, green, black, purple 25%)</h3>
   <div id="myd">
   </div>
   
</body>
</html>

Output

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

Important - The percentage of last color decides the number of repetition. For example: in above example, since the percentage of last color is 25%, therefore the total repetition will be 100/25 or 4.

Formula: The number of repetition = 100/percentageOfLastColorStop

CSS repeating-linear-gradient() Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #a, #b, #c, #d, #e, #f {height: 220px;}
      #a {background-image: repeating-linear-gradient(red, green, black, purple 25%);}
      #b {background-image: repeating-linear-gradient(45deg, red, green, black, purple 25%);}
      #c {background-image: repeating-linear-gradient(-45deg, red, green, black, purple 25%);}
      #d {background-image: repeating-linear-gradient(90deg, red, green, black, purple 25%);}
      #e {background-image: repeating-linear-gradient(-90deg, red, green, black, purple 25%);}
      #f {background-image: repeating-linear-gradient(to bottom right, red, green, black, purple 25%);}
   </style>
</head>
<body>
   
   <h3>background-image: repeating-linear-gradient(red, green, black, purple 25%)</h3>
   <div id="a">
   </div>

   <h3>background-image: repeating-linear-gradient(45deg, red, green, black, purple 25%)</h3>
   <div id="b">
   </div>

   <h3>background-image: repeating-linear-gradient(-45deg, red, green, black, purple 25%)</h3>
   <div id="c">
   </div>

   <h3>background-image: repeating-linear-gradient(90deg, red, green, black, purple 25%)</h3>
   <div id="d">
   </div>

   <h3>background-image: repeating-linear-gradient(-90deg, red, green, black, purple 25%)</h3>
   <div id="e">
   </div>

   <h3>background-image: repeating-linear-gradient(to bottom right, red, green, black, purple 25%)</h3>
   <div id="f">
   </div>
   
</body>
</html>

Output

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

background-image: repeating-linear-gradient(45deg, red, green, black, purple 25%)

background-image: repeating-linear-gradient(-45deg, red, green, black, purple 25%)

background-image: repeating-linear-gradient(90deg, red, green, black, purple 25%)

background-image: repeating-linear-gradient(-90deg, red, green, black, purple 25%)

background-image: repeating-linear-gradient(to bottom right, red, green, black, purple 25%)

CSS Online Test

« Previous Tutorial Next Tutorial »