How to create a ZigZag backgound in CSS

If you are looking for how to create a zigzag background in CSS (Cascading Stylesheets) without using any image/images then the following tutorial is for you. We’ll use CSS Gradients to create a zigzag background.

CSS ZigZag Background Demo

CSS ZigZag Background Demo Code

<style>
.zigzag-bg h3 {
    font-size: 30px;
    background: rgb(241 241 241 / 60%);
    padding: 10px;
}
.zigzag-bg {
    text-align: center;
    display: flex;
    aling-items: center;
    justify-content: center;
    padding: 150px;
    background: linear-gradient(45deg, green 25%, transparent 25%), 
    linear-gradient(-45deg, green 25%, transparent 25%), 
    linear-gradient(135deg, green 25%, transparent 25%) 15px 0, 
    linear-gradient(-135deg, green 25%, transparent 25%) 15px 0;
    background-size: 30px 30px;
}
</style>

<div class="zigzag-bg">
    <h3>CSS ZigZag Background</h3>
</div>

In the code mentioned above we used linear-gradient to achieve the zigzag background effect without using any images. We simply used linear-gradient as a background to achieve the zigzag background effect. Just play with and if you have any problems kindly ask me in the comments below and I’ll do my best to make things work for you.