Linear Background Patterns

This page contains linear background patterns created with CSS. Linear patterns are those created with linear-gradient() or repeating-linear-gradient() to create gradients with straight lines (as opposed to curved gradients created with radial-gradient() or repeating-radial-gradient()).

Cubes

You can use linear-gradient() to create a background "cube" effect. This is done by carefully crafting the gradient angles along with the colors, as well as the background size and position.

​x
 
<style scoped>
.pattern {min-height:200px;}
​
#linear1 {
background: 
linear-gradient(30deg, #bdbdbd 12%, transparent 12.5%, transparent 87%, #bdbdbd 87.5%, #bdbdbd 0), 
linear-gradient(150deg, #bdbdbd 12%, transparent 12.5%, transparent 87%, #bdbdbd 87.5%, #bdbdbd 0), 
linear-gradient(30deg, #bdbdbd 12%, transparent 12.5%, transparent 87%, #bdbdbd 87.5%, #bdbdbd 0), 
linear-gradient(150deg, #bdbdbd 12%, transparent 12.5%, transparent 87%, #bdbdbd 87.5%, #bdbdbd 0), 
linear-gradient(60deg, #dbdbdb 25%, transparent 25.5%, transparent 75%, #dbdbdb 75%, #dbdbdb 0), 
linear-gradient(60deg, #dbdbdb 25%, transparent 25.5%, transparent 75%, #dbdbdb 75%, #dbdbdb 0), #ccc;
background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
background-size: 80px 140px;
}
</style>
​
<div id="linear1" class="pattern">
<h2>Sample text</h2>
</div>

Checkered Effect

You can use linear-gradient() to create a checkered effect.

xxxxxxxxxx
 
<style scoped>
.pattern {min-height:200px;}
​
#linear2 {
background-color: #eee;
background-image: 
linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), 
linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
background-size:100px 100px;
background-position:0 0, 50px 50px
}
</style>
​
<div id="linear2" class="pattern">
<h2>Sample text</h2>
</div>

Rotated Checkers

xxxxxxxxxx
 
<style scoped>
.pattern {min-height:200px;}
​
#linear3 {
background: 
linear-gradient(-45deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 75%, rgb(204,204,204) 75%, rgb(204,204,204) 100%), 
linear-gradient(45deg, rgb(204,204,204) 0, rgb(204,204,204) 25%, rgba(140,140,140,0) 25%, rgba(238,238,238,0) 100%), 
linear-gradient(-45deg, rgb(204,204,204) 0, rgb(204,204,204) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 100%), 
linear-gradient(45deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 75%, rgb(204,204,204) 75%, rgb(204,204,204) 100%), rgb(238,238,238);
background-position: 50% 50%;
background-size: 75px 75px;
}
</style>
​
<div id="linear3" class="pattern">
<h2>Sample text</h2>
</div>

Triangles

xxxxxxxxxx
 
<style scoped>
.pattern {min-height:200px;}
​
#linear4 {
background: 
linear-gradient(115deg, transparent 75%, #eee 75%), 
linear-gradient(245deg, transparent 75%, #eee 75%), 
linear-gradient(115deg, transparent 75%, #eee 75%), 
linear-gradient(245deg, transparent 75%, #eee 75%), #ccc;
background-position: 0 0, 0 0, 20px -40px, 20px -40px;
background-size: 40px 80px;
}
</style>
​
<div id="linear4" class="pattern">
<h2>Sample text</h2>
</div>
xxxxxxxxxx
 
<style scoped>
.pattern {min-height:200px;}
​
#linear4 {
background: 
linear-gradient(115deg, transparent 75%, #ccc 75%), 
linear-gradient(245deg, transparent 75%, #ccc 75%), 
linear-gradient(115deg, transparent 75%, #ccc 75%), 
linear-gradient(245deg, transparent 75%, #ccc 75%), #eee;
background-position: 0 0, 0 0, 20px -40px, 20px -40px;
background-size: 40px 80px;
}
</style>
​
<div id="linear4" class="pattern">
<h2>Sample text</h2>
</div>
xxxxxxxxxx
 
<style scoped>
.pattern {min-height:200px;}
​
#linear5 {
background: 
linear-gradient(115deg, transparent 75%, #ccc 75%), 
linear-gradient(245deg, transparent 75%, #ccc 75%), 
linear-gradient(115deg, transparent 75%, #ccc 75%), 
linear-gradient(245deg, transparent 75%, #ccc 75%), #eee;
background-position: 0 0, 0 0, 0px -40px, 0px -40px;
background-size: 40px 80px;
}
</style>
​
<div id="linear5" class="pattern">
<h2>Sample text</h2>
</div>

Background Stripes

Here we use repeating-linear-gradient() to acheive a striped effect. See more background stripes.

xxxxxxxxxx
 
<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>

Related