How to repeat linear gradients with CSS

CSS Web Development Front End Technology

To repeat linear gradients with CSS, use the repeating-linear-gradient() function. You can try to run the following code to implement it:

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         #demo {
            height: 100px;
            background: repeating-linear-gradient(red, yellow 30%, green 30%);
         }
      </style>
   </head>
   <body>
      <h2>Linear Gradient</h2>
      <div id = "demo">Repeating Linear Gradients</div><br>
   </body>
</html>