Checkerboard pattern with CSS3

A while ago, I wrote a post on creating simple patterns with CSS3 gradients. A common pattern I was unable to create was that of a regular, non-rotated checkerboard. However, I noticed today that by giving a different background-position to every triangle in the pattern tile, a checkerboard can be easily created:

View in Gecko or Webkit.
Webkit seems to have an odd rendering bug, so it needed a background-size override and it still doesn’t look perfect. Oh well, reported the bug and moved on.

  • Pingback: Checkerboard, striped & other background patterns with CSS3 gradients | Lea Verou()

  • Daniel15

    Great example! You’re quite handy with CSS gradients, I haven’t seen anything quite as unique as this (and the earlier post you made about the striped gradients). 🙂

  • shpyo

    Another great example of css powah! 🙂

  • Anonymous

    It’s a totally different way of thinking…. Times like this make me wish I had a computer science background. 🙂 I love it.

  • Anonymous

    We would love a brief explanation of how you arrived at this! Might you be so kind as to share? You’re a genius.

    • Lea Verou

      Thanks 🙂
      I had first created the other patterns (see my older post), which are easier. I’ve been thinking about this one off an on since then, since I couldn’t believe it was impossible. Then I noticed that if I use different background positions on the tiles of the diagonal checkerboard, this can be created.

  • Flurin Egger

    Just based our corporate pattern on this example. (The pattern:

    It’s not quite perfect yet, I have to tinker with the background-sizes to get less rounding problems.

    • Lea Verou

      Haven’t tried it but I’m pretty sure you could use way less gradients for this. 21 is just way too many. You just need 2 for the diagonal stripes and other 4 for their intersecting squares (although it might be worth it to try using an rgba color for the topmost stripes and see if you like the colors of the intersecting squares as-is, which would cut down the number of gradients to just 2).

  • Pingback: the rasx() context » Blog Archive » @denisejacobs CSS Links()

  • Jessica Kafor

    I am so late on utilizing css3 for patterns -you are great!

  • Pingback: [CSS]不用圖檔將背景轉成PS風透明格仔 - heika note()

  • Pingback: angara fahise()