CSS Background Stripes

This page contains CSS background stripes. These are CSS backgrounds that use linear-gradient() or repeating-linear-gradient() to create background stripes.

Horizontal Stripes using `linear-gradient()`

Here we use linear-gradient() to acheive a striped effect.

<style scoped>
.pattern {min-height:200px;}

#stripes1 {
background: linear-gradient(90deg, rgba(255,255,255,0.3) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 0), #ccc;
background-size:50px auto;
}
</style>

<div id="stripes1" class="pattern">
<h2>Sample text</h2>
</div>

Horizontal Stripes using `repeating-linear-gradient()`

This example uses repeating-linear-gradient() to acheive a similar effect to the above example. We also use hexadecimal values instead of RGBA.

<style scoped>
.pattern {min-height:200px;}

#stripes2 {
background-image: repeating-linear-gradient(90deg, #ccc, #ccc 30px, #dbdbdb 30px, #dbdbdb 60px);
}
</style>

<div id="stripes2" class="pattern">
<h2>Sample text</h2>
</div>

Horizontal Stripes

We use repeating-linear-gradient() to create horizontal stripes. The only difference between horizontal and the vertical stripes is that we use 180deg for horizontal and 90deg for vertical.

<style scoped>
.pattern {min-height:200px;}

#stripes3 {
background-image: repeating-linear-gradient(180deg, #ccc, #ccc 30px, #dbdbdb 30px, #dbdbdb 60px);
}
</style>

<div id="stripes3" class="pattern">
<h2>Sample text</h2>
</div>

Different Angles

Let's tweak the angle a bunch and see what happens…

<style scoped>
.pattern {min-height:200px;}

#stripes4 {
background-image: repeating-linear-gradient(45deg, #ccc, #ccc 30px, #dbdbdb 30px, #dbdbdb 60px);
}
</style>

<div id="stripes4" class="pattern">
<h2>Sample text</h2>
</div>

<style scoped>
.pattern {min-height:200px;}

#stripes5 {
background-image: repeating-linear-gradient(30deg, #ccc, #ccc 30px, #dbdbdb 30px, #dbdbdb 60px);
}
</style>

<div id="stripes5" class="pattern">
<h2>Sample text</h2>
</div>

<style scoped>
.pattern {min-height:200px;}

#stripes6 {
background-image: repeating-linear-gradient(60deg, #ccc, #ccc 30px, #dbdbdb 30px, #dbdbdb 60px);
}
</style>

<div id="stripes6" class="pattern">
<h2>Sample text</h2>
</div>

<style scoped>
.pattern {min-height:200px;}

#stripes7 {
background-image: repeating-linear-gradient(20deg, #ccc, #ccc 30px, #dbdbdb 30px, #dbdbdb 60px);
}
</style>

<div id="stripes7" class="pattern">
<h2>Sample text</h2>
</div>

<style scoped>
.pattern {min-height:200px;}

#stripes8 {
background-image: repeating-linear-gradient(70deg, #ccc, #ccc 30px, #dbdbdb 30px, #dbdbdb 60px);
}
</style>

<div id="stripes8" class="pattern">
<h2>Sample text</h2>
</div>

<style scoped>
.pattern {min-height:200px;}

#stripes9 {
background-image: repeating-linear-gradient(100deg, #ccc, #ccc 30px, #dbdbdb 30px, #dbdbdb 60px);
}
</style>

<div id="stripes9" class="pattern">
<h2>Sample text</h2>
</div>

<style scoped>
.pattern {min-height:200px;}

#stripes10 {
background-image: repeating-linear-gradient(145deg, #ccc, #ccc 30px, #dbdbdb 30px, #dbdbdb 60px);
}
</style>

<div id="stripes10" class="pattern">
<h2>Sample text</h2>
</div>

<style scoped>
.pattern {min-height:200px;}

#stripes11 {
background-image: repeating-linear-gradient(165deg, #ccc, #ccc 30px, #dbdbdb 30px, #dbdbdb 60px);
}
</style>

<div id="stripes11" class="pattern">
<h2>Sample text</h2>
</div>

Thin Stripes

<style scoped>
.pattern {min-height:200px;}

#stripes12 {
background-image: repeating-linear-gradient(165deg, #ccc, #ccc 10px, #dbdbdb 10px, #dbdbdb 20px);
}
</style>

<div id="stripes12" class="pattern">
<h2>Sample text</h2>
</div>

Thick Stripes

<style scoped>
.pattern {min-height:200px;}

#stripes13 {
background-image: repeating-linear-gradient(165deg, #ccc, #ccc 60px, #dbdbdb 60px, #dbdbdb 120px);
}
</style>

<div id="stripes13" class="pattern">
<h2>Sample text</h2>
</div>

More Colors

You can add more colors as you wish by adding the color and modifying the pixel amounts (to accommodate the three colors). In this example there are stripes in three different colors.

<style scoped>
.pattern {min-height:200px;}

#stripes14 {
background-image: repeating-linear-gradient(90deg, #ccc, #ccc 20px, #dbdbdb 20px, #dbdbdb 40px, #ebebeb 40px, #ebebeb 60px);
}
</style>

<div id="stripes14" class="pattern">
<h2>Sample text</h2>
</div>

Qhmit.com

CSS Background Stripes

Horizontal Stripes using `linear-gradient()`

Horizontal Stripes using `repeating-linear-gradient()`

Horizontal Stripes

Different Angles

Thin Stripes

Thick Stripes

More Colors

Related

CSS Background Stripes

Horizontal Stripes using linear-gradient()

Horizontal Stripes using repeating-linear-gradient()

Horizontal Stripes

Different Angles

Thin Stripes

Thick Stripes

More Colors

Related

Horizontal Stripes using `linear-gradient()`

Horizontal Stripes using `repeating-linear-gradient()`