Drawing a Houndstooth Pattern in CSS

Source: Dev.to

Introduction

I associate the houndstooth pattern with childhood—I remember seeing it everywhere when I was little, only for it to disappear later on. From a CSS perspective, the pattern is actually quite simple and can be created with just two gradients:

• Conic gradient – generates the white and black box pattern.
• Repeating linear gradient (or a regular linear gradient) – creates the diagonal lines.

For convenience, define a custom property for the size so you can adjust the pattern by changing a single value.

CSS Implementation

body {
  --size: 100px;                     /* Adjust this value to change the pattern size */
  background-size: var(--size) var(--size);
  background-image:
    conic-gradient(#fff 25%, #0000 0 50%, #000 0 75%, #0000 0),
    repeating-linear-gradient(
      135deg,
      #fff 0 12.5%,
      #000 0 25%,
      #fff 0 37.5%,
      #000 0 62.5%
    );
}

How it works

• --size controls the width and height of each repeat of the pattern.
• The conic-gradient creates the classic checker‑board squares of the houndstooth.
• The repeating-linear-gradient adds the diagonal “tooth” lines at a 135° angle.

Demo

Video generating the pattern in real time with CSS.

(Insert video embed or link here.)

And that’s how you draw a houndstooth pattern with CSS. :)