How Do We Make Striped Background Designs with CSS?

Today, CSS is one of the easiest and most powerful techniques in website development to speeding up a website with attractive and trendy background designs.

Today we are going to see about “How Do We Make Striped Backgrounds with CSS?”

/* Normal Colored Diagonal Stripes */

<style> #stripstyle {background: repeating-linear-gradient(45deg, #29d929, #29d929 10px, #2fc91a 10px, #2fc91a 15px); width:1000px; height:100px; color:white;} </style> <div id=“stripstyle”><center><b><br><br>Normal Colored Diagonal Stripes</b></center></div>

Result:

/* Gradient Diagonal Stripes */

<style> #stripstyle {background: /* On “top” */ repeating-linear-gradient(45deg, transparent, transparent 10px, #f53beb 10px, #f53beb 20px), /* on “bottom” */ linear-gradient(to bottom, #c4bbc4, #ffffff); width:1000px; height:100px; color:white;} </style> <div id=“stripstyle”><center><b><br><br>Gradient Diagonal Stripes</b></center></div>

Result:

/* Stripes Over Image */

<style> #stripstyle {background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 10px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.3) 20px), url(Image URL); width:1000px; height:100px; color:white;} </style> <div id=”stripstyle”><center><b><br><br>Stripes Over Image</b></center></div>

Result:

/* Any Direction, Any Angle */

<style> #stripstyle {background: repeating-linear-gradient(130deg, #222, #222 10px, #e87979 10px, #e87979 20px); width:1000px; height:100px; color:white;} </style> <div id=“stripstyle”><center><b><br><br>Any Direction, Any Angle</b></center></div>

Result:

/* Straight Stripes */

<style> #stripstyle {background: linear-gradient(to bottom, #dc73ff, #dc73ff 50%, #a536c9 50%, #a536c9); /* The rectangle in which to repeat. It can be fully wide in this case */ background-size: 100% 20px; width:1000px; height:100px; color:white;} </style> <div id=“stripstyle”><center><b><br><br>Straight Stripes</b></center></div>

Result:

/* Vertical Stripes */

<style> #stripstyle {background: repeating-linear-gradient(to right, #f6ba52, #f6ba52 10px, #ffd180 10px, #ffd180 20px); width:1000px; height:100px; color:white;} </style> <div id=“stripstyle”><center><b><br><br>Vertical Stripes</b></center></div>

Result:

/* Radial Stripes */

<style> #stripstyle {background: repeating-radial-gradient(circle, Green, Green 5px, #ffec19 5px, #ffec19 10px); width:1000px; height:100px; color:Black;} </style> <div id=“stripstyle”><center><b><br><br>Radial Stripes</b></center></div>

Result: