How to create Chess pattern background using HTML and CSS ?

How to create Chess pattern background using HTML and CSS ?

Last Updated : 30 Jan, 2024

Chess patterns are simply certain tactical positions that regularly occur in games. It can be easily designed by using the pseudo selector of CSS. This type of pattern can be used to create confusing illusions.

Preview:

Screenshot-2024-01-04-171042

Approach:

Create a centered container for the chessboard with a fixed size and border.
Style the chessboard using linear gradients for alternating black and white squares.
Tweak the container and chessboard sizes, colors, or gradients to your preference.
Embed the chessboard within the container, forming a visually appealing card-like design.

Example: In this example, we will design the basic structure of the chess pattern.

HTML

<!DOCTYPE html>
<html lang="">

<head>
    <title>Chess Pattern</title>
    <style>
        .chessboard-container {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 400px;
            height: 400px;
            border: 5px solid #333;
            overflow: hidden;
        }
        
        .chessboard {
            width: 100%;
            height: 100%;
            background-size: 50px 50px;
            background-image: 
        linear-gradient(45deg, #000 25%, transparent 25%, 
                        transparent 75%, #000 75%, #000),
        linear-gradient(45deg, #000 25%, transparent 25%, 
                        transparent 75%, #000 75%, #000),
        linear-gradient(45deg, #fff 25%, transparent 25%, 
                        transparent 75%, #fff 75%, #fff),
        linear-gradient(45deg, #fff 25%, transparent 25%, 
                        transparent 75%, #fff 75%, #fff);
            background-position: 0 0, 25px 25px, 25px 0, 0 25px;
        }
    </style>
</head>

<body>
    <div class="chessboard-container">
        <div class="chessboard"></div>
    </div>
</body>

</html>

Output:

Screenshot-2024-01-04-171042

How to create Chess pattern background using HTML and CSS ?

S

sirohimukul1999

Improve

Article Tags :

Similar Reads

How to Create Badges using HTML and CSS ?

This article will show you how to create a badge using HTML and CSS. Badges are simple and basic components that are used to display an indicator or count a number. This is quite useful for mail count and alerting purposes, among other things. Badges are identical to labels, with the exception that

How to create texture background using CSS ?

Introduction: We can use CSS property to texture the background of the web page by using an image editor to cut out a portion of the background. Apply CSS background-repeat property to make the small image fill the area where it is used. CSS provides many styling properties of the background includi

How to Create a Wave Image for a Background using HTML and CSS ?

This type of background creates uniqueness on your webpage by avoiding regular rectangular sized background or header. The following header design will show your creativity. This design can be achieved in two ways: Using ::before and ::after selector on a div element in CSS.Using SVG in HTML. Exampl

How to make bubble background using HTML5 and CSS3?

Water bubble background animation can easily be generated by using HTML, CSS JavaScript. By using HTML5 we will design the basic body part of the page and by CSS3 we will make the bubbles in the background, And with the help of JavaScript, it will move over the whole page from bottom to up.Approach:

How to Create Animated Background using CSS3 ?

Pre-requisite:Basic html Learn HTMLcss Learn cssYou will need to have a basic knowledge of Keyframes with css Learn Keyframes In this article, we are creating the background animation using CSS. The login form is used as a demo and the main intention to design background animation. HTML code: In thi

How to create and style border using CSS ?

The border property is used to create a border around an element and defines how it should look. There are three properties of the border. border-colorborder-widthborder-style border-style property: This defines how the border should look like. It can be solid, dashed, offset, etc. The following val

How to Change the Background Color of Table using CSS?

Changing the background color of a table using CSS can help improve the visual appearance of a website or web application. we will learn how to change the background color of the table using CSS with different approaches.These are the following approaches:Table of Content Using Inline CSSUsing Inter

How to Add Image in Text Background using HTML and CSS ?

In this article, we will use HTML and CSS to set the image in the text background. To set the image in the text background, some CSS property is used. To add an image in the text background using HTML and CSS, create a container element (e.g., a `<div>`), set its background to the desired imag

How to Create Wave Background using CSS?

A wave background is a design element having wavy patterns or shapes used to add movement in the web pages. The :before pseudo-element can be used to create a wavy background by applying it to an element and using CSS properties like clip-path to create wave shapes.Using :before pseudo-elementTo cre

Create a Galaxy Background using HTML/CSS

In this article, we will see how to create the galaxy background using the HTML & CSS, along with knowing the basic CSS properties used & will understand it through the example. A galaxy background means a small bunch of circles having different sizes with different shades and a dark backgro