Zig-Zag Background Patterns Check out the following CSS zig-zag patterns that you can add to your website. This shows how many different patterns can be acheived by simple changes in the code. Run Stack editor Unstack editor <style scoped> .pattern {min-height:200px;} #zig-zag1 { background: linear-gradient(135deg, #ccc 25%, transparent 25%) -50px 0, linear-gradient(225deg, #ccc 25%, transparent 25%) -50px 0, linear-gradient(315deg, #ccc 25%, transparent 25%), linear-gradient(45deg, #ccc 25%, transparent 25%); background-size: 100px 100px; background-color: #eee; } </style> <div id="zig-zag1" class="pattern"> <h2>Sample text</h2> </div> Run Stack editor Unstack editor <style scoped> .pattern {min-height:200px;} #zig-zag2 { background: linear-gradient(135deg, #ccc 25%, transparent 25%) -50px 0, linear-gradient(225deg, #eee 25%, transparent 25%) -50px 0, linear-gradient(315deg, #ccc 25%, transparent 25%), linear-gradient(45deg, #eee 25%, transparent 25%); background-size: 100px 100px; background-color: #fff; } </style> <div id="zig-zag2" class="pattern"> <h2>Sample text</h2> </div> Run Stack editor Unstack editor <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> Run Stack editor Unstack editor <style scoped> .pattern {min-height:200px;} #zig-zag4 { background: linear-gradient(135deg, #ccc 25%, transparent 25%) -20px 0, linear-gradient(225deg, #ccc 25%, transparent 25%) -20px 0, linear-gradient(315deg, #ccc 25%, transparent 25%), linear-gradient(45deg, #ccc 25%, transparent 25%); background-size: 100px 100px; background-color: #eee; } </style> <div id="zig-zag4" class="pattern"> <h2>Sample text</h2> </div> Run Stack editor Unstack editor <style scoped> .pattern {min-height:200px;} #zig-zag10 { background: linear-gradient(135deg, #ccc 25%, transparent 25%) -25px 0, linear-gradient(225deg, #ccc 25%, transparent 25%) -25px 0, linear-gradient(315deg, #ccc 25%, transparent 25%), linear-gradient(45deg, #ccc 25%, transparent 25%); background-size: 50px 50px; background-color: #eee; } </style> <div id="zig-zag10" class="pattern"> <h2>Sample text</h2> </div> Run Stack editor Unstack editor <style scoped> .pattern {min-height:200px;} #zig-zag11 { background: linear-gradient(135deg, #eee 25%, transparent 25%) -10px 0, linear-gradient(225deg, #eee 25%, transparent 25%) -10px 0, linear-gradient(315deg, #eee 25%, transparent 25%), linear-gradient(45deg, #eee 25%, transparent 25%); background-size: 20px 20px; background-color: #fff; } </style> <div id="zig-zag11" class="pattern"> <h2>Sample text</h2> </div>