Skip to content

Home

Checkerboard background pattern

Creates a checkerboard background pattern.

💬 Note

The fixed height and width of the element is for demonstration purposes only.

<div class="checkerboard"></div>
.checkerboard {
  width: 240px;
  height: 240px;
  background-color: #fff;
  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
    );
  background-size: 60px 60px;
  background-repeat: repeat;
}

More like this

Start typing a keyphrase to see matching snippets.