30-seconds-of-code/snippets/checkerboard-pattern.md

title, tags, expertise, cover, firstSeen, lastUpdated

title	tags	expertise	cover	firstSeen	lastUpdated
Checkerboard background pattern	visual	intermediate	blog_images/digital-nomad-2.jpg	2021-01-11T09:51:43+02:00	2021-10-13T19:29:39+02:00

Creates a checkerboard background pattern.

• Use background-color to set a white background.
• Use background-image with two linear-gradient() values. Give each one a different angle to create the checkerboard pattern.
• Use background-size to specify the pattern's size.
• 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;
}