Drawing a Houndstooth Pattern in CSS

I associated the houndstooth pattern with childhood. Because I remember seeing it everywhere when I was little, but suddenly disappear and not seeing anywhere.

From a CSS perspective, the pattern is really simple and it can be created with just two gradients:

• Conic gradient to generate a white and black box pattern
• Repeating linear gradient (or just a linear gradient if you prefer) to generate the diagonal lines

For simplicity, I recommend having a custom property for the size, so it's easier to change the size by updating a single point in the code, instead of two… so really, not so necessary, but still convenient.

Here's a video generating the pattern in real time with CSS:

And here's the source code. And don't forget to change the value of the custom property --size to adjust it to your needs:

body {
  --size: 100px;
  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%
    );
}

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