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.
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.