CSS Patterns

2017/05/03 code web

The other day while working on the chat app, I needed to create a checkered board. I considered using JS to this end, but I did a quick google search just in case. Turns out you can get pretty far with just CSS:

In some browsers, this is seamless. iOS Safari shows no glitches. However, in Firefox, you get a tiny bit of clipping, which gives away the trick.

It's really quite simple. We simply overlay two very sharp linear gradients on top of each other, and offset one a little bit so that it matches up with the end of another!

Let's start with the basics: a simple little gradient. We go from 0% to 100%, covering the entire spectrum. We ensure that the pattern repeats itself via the "background-size" property.

We can also add an intermediate transparent element. Also, we can make the boundaries very sharp. This can create the illusion of two elements.

We can also do multiple patterns in a single block.

The background position CSS attribute takes a sequence, so we can offset each pattern a little bit.

So, with the right coloring:

Here, instead of a 25/75 split, we went for a tiny bit of overlap, 26/74, and this trades the glitch along the diagonal for a little glitch in the connections.