Repeating Square Dots Backgrounds in CSS 관련

CSS > Article(s)

---

Article(s)

• Repeating a Small Area
• Drawing the Square Dot
• Uh Oh — Transparency?
• Enter Conic Gradients

---

Repeating Square Dots Backgrounds in CSS

We look at a couple of ways to essentially draw a little square dot in a slightly larger area and let it repeat, giving us a nice dotted background effect.

I saw this reasonable ask for help the other day.

Pawel Grzybek (@pawelgrzybek) from Mastadon

Hey all CSS wizards. I need your help.

I would love this bg pattern to be squares instead of little circles (radial-gradient). Is that even possible using pure CSS?

See bg dot pattern by pawelgrzybek on CodePen.

I have seen that on the ATProto website, but they use SVG for it.

AT Protocol

Building the Social Internet.

@kevinpowell @css @bramus @chriscoyier 🙏

Paweł Grzybek (@pawelgrzybek@mastodon.social)

---

Hey all CSS wizards. I need your help. ...

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;
}

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;
}

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:

See Dot Backgrounds by editor/chriscoyier on CodePen.

---

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 (@Meyerweb). 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%
    );
}

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!

See Dot Backgrounds (conic) by editor/chriscoyier on CodePen.

Repeating Square Dots Backgrounds in CSS

---

We look at a couple of ways to essentially draw a little square dot in a slightly larger area and let it repeat, giving us a nice dotted background effect.