CSS Repeating Background Gradients

by

in

In this post you learn CSS Repeating Background Gradients. The repeating-linear-gradient() CSS function creates an image consisting of repeating linear gradients. This data type is a special type.

Let’s dive in….

First Gradient

CSS Gradients data type. this example uses an gradients to show the repeating background gradients of steps in process.

<style>
     div#ttt{
     border-radius: 20px;
     width: 30%;
     height: 600px;
     margin: auto;
     background: repeating-linear-gradient(
     60deg,
     #DC143C 40px,
     #DC143C 40px,
     #7FFF00  70px,
     #7FFF00  70px
     );
      }
  </style>
<body>
  <div id="ttt"></div>
</body>

The above code should look like the gradient image below in your preferred browser.

css gradient data type

Second Gradient

In this code we will create another gradient. But with other colors.

<style>
   div#ht{
           border-radius: 20px;
           width: 30%;
           height: 600px;
           margin: auto;
           background: repeating-linear-gradient(
             80deg,
             yellow 0px,
             blue 40px,
             green 40px,
             red 80px
           );
          }
</style>
 <body>
    <div id="ht"></div>
</body>

The above code should look like the gradient image below in your preferred browser.

gradient css data type .png

Third Gradient

In this code we will also create gradient. But with other color.

<style>
div#th{
     border-radius: 20px;
     width: 30%;
     height: 600px;
     margin:  auto;
     background: repeating-linear-gradient(
     45deg,
     red 0px,
     red 40px,
     black 40px,
     black 80px
      );
  }
</style>
<body>
 <div id="th"></div>
</body>

The above code should look like the gradient image below in your preferred browser.

css gradient data type

Fourth Gradient

In this code we will also create gradient. But with other color.

<style>
div#tth{
     border-radius: 20px;
     width: 30%;
     height: 600px;
     margin: auto;
     background: repeating-linear-gradient(
       45deg,
       red 0px,
       black 40px,
       white 40px,
       tomato 70px
        );
      }
</style>
<body>
 <div id="tth"></div>
</body>

The above code should look like the gradient image below in your preferred browser.

css gradient data type

Fifth Gradient

In this code we will also create gradient. But with other color.

<style>
    div#hhh{
    border-radius: 20px;
    width: 30%;
    height: 600px;
    margin: auto;
    background: repeating-linear-gradient(
        45deg,
        orange 0px,
        cyan 40px,
        red 40px,
        orchid 70px
         );
       }
</style>
<body>
  <div id="hhh"></div>
</body>

The above code should look like the gradient image below in your preferred browser.

css gradient data type

Sixth Gradient

In this code we will also create gradient. But with other color.

<style>
     div#hht{
      border-radius: 20px;
      width: 30%;
      height: 600px;
      margin: auto;
      background: repeating-linear-gradient(
           45deg,
           magenta  0px,
           maroon 40px,
           magenta 40px,
           lime 70px
           );
         }
</style>
 <body>
   <div id="hht"></div>
</body>

The above code should look like the gradient image below in your preferred browser.

css gradient data type