How to create background stripes using CSS?

With the following post you will learn how to create background stripes using CSS only and no extra images.

You just need to apply this simple script and modify it according to your needs.

---

CSS

.box{
   background: repeating-linear-gradient(
    -45deg,
    #9a9a9a,
    #9a9a9a 1px,
    #232323,
    #232323 5px
  );
}

DEMO

Open demo in a full window – https://demos.webdevpuneet.com/set1/css-background-stripes/index.html

---

DEMO Source (CSS + HTML)

<style>
.box1{
  background: repeating-linear-gradient(-45deg, #9a9a9a, #9a9a9a 1px, #232323, #232323 5px);
  height: 100px;
}
.box2{
   background: repeating-linear-gradient(45deg, #9a9a9a, #9a9a9a 1px, #232323, red 15px);
   height: 100px;
}
.box3{
   background: repeating-linear-gradient(-45deg, #9a9a9a, #9a9a9a 1px, #232323, #232323 15px);
   height: 100px;
}
.box4{
   background: repeating-linear-gradient(0deg, #9a9a9a, #9a9a9a 1px, blue, red 5px);
   height: 100px;
}
</style>

<div class="box1">
</div>
<br/>
<div class="box2">
</div>
<br/>
<div class="box3">
</div>
<br/>
<div class="box4">
</div>

You can also use this cool CSS gradient tool to generate stripe of different colors.