Implementation Approach

The technique relies on combining two identical right triangles to form a perfect square. These triangles are created using CSS linear-gradient with specific color stops.

Step 1: Creating a Single Triangle

Start with a 45-degree linear gradient where the first color occupies 25% of the tile:

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
  background-image: linear-gradient(45deg, #1a1a2e 25%, transparent 0);
}

This produces a single right triangle within the gradient tile.

Step 2: Defining the Tile Size

Control the dimensions of each background tile using background-size:

body {
  background-image: linear-gradient(45deg, #1a1a2e 25%, transparent 0);
  background-size: 60px 60px;
}

Step 3: Creating the Opposite Triangle

To form a complete square, add a second gradient layer positioned at 75%:

body {
  background-image: linear-gradient(45deg, transparent 75%, #1a1a2e 0);
  background-size: 60px 60px;
}

Step 4: Combining Both Triangles

Merge both gradients in to a single layer using the comma syntax:

body {
  background-image: 
    linear-gradient(45deg, #1a1a2e 25%, transparent 0, transparent 75%, #1a1a2e 0),
    linear-gradient(45deg, #1a1a2e 25%, transparent 0, transparent 75%, #1a1a2e 0);
  background-size: 60px 60px;
}

Step 5: Positioning the Second Layer

Offset the second gradient by half the tile size to align both triangles into a complete square:

body {
  background-image: 
    linear-gradient(45deg, #1a1a2e 25%, transparent 0, transparent 75%, #1a1a2e 0),
    linear-gradient(45deg, #1a1a2e 25%, transparent 0, transparent 75%, #1a1a2e 0);
  background-position: 0 0, 30px 30px;
  background-size: 60px 60px;
}

The key principle: the background-position offset equals exactly half of background-size. This alignment ensures both gradient layers combine seamlessly to create the checkerboard effect.

Complete Implementation

<style>
  html, body {
    margin: 0;
    width: 100%;
    height: 100%;
  }

  body {
    background-image: 
      linear-gradient(45deg, #1a1a2e 25%, transparent 0, transparent 75%, #1a1a2e 0),
      linear-gradient(45deg, #1a1a2e 25%, transparent 0, transparent 75%, #1a1a2e 0);
    background-position: 0 0, 30px 30px;
    background-size: 60px 60px;
  }
</style>

This creates a repeating checkerboard pattern across the entire background. The pattern automatically tiles based on the viewport dimensions.