Repeating Square Dots Backgrounds in CSS

I saw this reasonable ask for help the other day.

Post by @pawelgrzybek@mastodon.social

View on Mastodon

Note that the example above has little circular dots, and what Paweł is asking about are little square dots. This is the example look from atproto.com:

Repeating a Small Area

My first thought is we’re obviously not drawing all these dots in one big graphic. We’re drawing one, leaving empty space, and using our ol’ pal background-repeat: repeat;

In order for the repeating to work, we need to define a smaller space via background-size. So let’s say it’s…

html {
  background-size: 100px 100px;
  background-repeat: repeat;
}Code language: CSS (css)

Now we’ve got a 100px square that will repeat over the entire background. We just need to fill that 100px square with a smaller square that repeats.

Drawing the Square Dot

Again my first thought was that we could make it look like we’re drawing a small square dot by actually letting a background-color show through and covering up everywhere else. So like a three-layer system:

html {
  background: 
    linear-gradient(to bottom, transparent 10px, white 10px),
    linear-gradient(to right, transparent 10px, white 10px),
    black;
}Code language: CSS (css)

If we flatten out that visual, you can see the three shapes smoosh down into a small square, which we then repeat.

That’s what’s going on here exactly:

Uh Oh — Transparency?

The problem with the above is that we need a solid color to be the “mask” that covers all the area except the mask. This means we can’t have, for example, one big image behind the dots or a gradient or anything (without more exotic trickery). The problem is we don’t have proper transparency.

What we want to be doing is drawing the dot with one “gradient”, if we can, and leaving the rest of the area empty/transparent.

Enter Conic Gradients

I didn’t think of this! Eric Meyer had the clever idea. The idea is that you can use conic-gradient to describe what we want in one go. “Hard stop” color stops are in use here, the classic trick to make a gradient just bands of solid color, not actually gradients. But in this case, three-quarters of the area is transparent, and the last bit is the dot color.

html {
  background-image: 
    conic-gradient(
      from 0deg at 5px 5px, 
      transparent 75%, black 75% 100%
    );
}Code language: CSS (css)

This took me a sec to understand, but it’s essentially setting the center of the conic gradient at a specific spot, then forcing most of the way around to be transparent and leaving the last bit as the dot.

Then we use the same concept as before where we set a smaller background-size and let it naturally repeat, and we’ve got square dots with a transparent background!