CSS Patterns
Check out the following CSS background patterns that you can add to your website. CSS3 allows you to create some complex background patterns. These are but a few.
Zig-Zag Background Patterns
Use linear-gradient()
to create a zig-zag effect. More Zig-Zag Patterns.
x
<style scoped>
.pattern {min-height:200px;}
#zig-zag3 {
background:
linear-gradient(145deg, #ccc 25%, transparent 25%) -50px 0,
linear-gradient(225deg, #ccc 25%, transparent 25%) -50px 0,
linear-gradient(315deg, #ccc 25%, transparent 25%),
linear-gradient(35deg, #ccc 25%, transparent 25%);
background-size: 100px 100px;
background-color: #eee;
}
</style>
<div id="zig-zag3" class="pattern">
<h2>Sample text</h2>
</div>
Circular Background Patterns
Use radial-gradient()
to create circular background effects. More Circular Patterns.
xxxxxxxxxx
<style scoped>
.pattern {min-height:200px;}
#circular7 {
background: repeating-radial-gradient(closest-side at 25px 35px, #ccc 15%, #eee 40%);
background-size:60px 60px;
}
</style>
<div id="circular7" class="pattern">
<h2>Sample text</h2>
</div>
Background Stripes
Use linear-gradient()
and repeating-linear-gradient()
to create background stripes. 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>
Linear Background Patterns
Use linear-gradient()
to create backgrounds with straight lines — either vertical, horizontal, or both. More Linear Patterns.
xxxxxxxxxx
<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>