How to create Chess pattern background using HTML and CSS ? - GeeksforGeeks

18 Aug, 2020
Chess patterns are simply certain tactical positions which regularly occur in games. It can be easily design by using the pseudo selector of CSS. This type of pattern can be used to create confusing illusions.
Approach: The approach is to use repeating linear gradient property to create a pattern that will be repeated to the defined height and width.
HTML Code: In this section, we will design the basic structure of the chess pattern.
HTML
<!DOCTYPE html><html>  <head>    <title>Chess Pattern</title></head>  <body>    <div class="geeks"></div></body>  </html>
CSS Code: For CSS, follow the below given steps.
Step 1: Set the position of div to fixed and apply some height and width.
Step 2: Now use before selector and apply repeating linear-gradient property with black and white color and angle set as 45deg.
Step 3: Now use after selector with the same properties as used in before just change the angle to -45 deg.
Step 4: Set the mix-blend mode to difference so that it can overlay on the background.
Tip: You can also use 0 deg in before and 90 deg in after to make perfect square chess like boxes. The output of the same will also be attached below.
CSS
<style>    .geeks {        position: fixed;        top: 0;        left: 0;        width: 100%;        height: 100vh;    }      .geeks::before {        content: "";        position: absolute;        width: 100%;        height: 100%;        background: repeating-linear-gradient(            45deg, #000 0, #000 40px,             #fff 40px, #fff 80px);    }      .geeks::after {        content: "";        position: absolute;        width: 100%;        height: 100%;        background: repeating-linear-gradient(            -45deg, #000 0, #000 40px,             #fff 40px, #fff 80px);        mix-blend-mode: difference;    }</style>
Complete Code: (With angles 45 deg and -45 deg): It is the combination of the above two sections of code to design a chess pattern.
HTML
<!DOCTYPE html><html>  <head>    <title>Chess Pattern</title></head>  <style>    .geeks {        position: fixed;        top: 0;        left: 0;        width: 100%;        height: 100vh;    }      .geeks::before {        content: "";        position: absolute;        width: 100%;        height: 100%;        background: repeating-linear-gradient(                45deg, #000 0, #000 40px,                 #fff 40px, #fff 80px);    }      .geeks::after {        content: "";        position: absolute;        width: 100%;        height: 100%;        background: repeating-linear-gradient(            -45deg, #000 0, #000 40px,             #fff 40px, #fff 80px);        mix-blend-mode: difference;    }</style>  <body>    <div class="geeks"></div></body>  </html>
Output:
While using angles as 45 and -45 deg:
Complete Code:(with angles 0 deg and 90 deg) It is the combination of the above two sections of code.
HTML
<!DOCTYPE html><html>  <head>    <title>Chess Pattern</title>      <style>        .geeks {            position: fixed;            top: 0;            left: 0;            width: 100%;            height: 100vh;        }          .geeks::before {            content: "";            position: absolute;            width: 100%;            height: 100%;            background: repeating-linear-gradient(                    0deg, #000 0, #000 40px,                     #fff 40px, #fff 80px);        }          .geeks::after {            content: "";            position: absolute;            width: 100%;            height: 100%;            background: repeating-linear-gradient(                90deg, #000 0, #000 40px,                 #fff 40px, #fff 80px);            mix-blend-mode: difference;        }    </style></head>  <body>    <div class="geeks"></div></body>  </html>
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Types of CSS (Cascading Style Sheet)
Design a web page using HTML and CSS
How to Upload Image into Database and Display it using PHP ?
How to set space between the flexbox ?
Create a Responsive Navbar using ReactJS
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
How to Insert Form Data into Database using PHP ?
REST API (Introduction)