Repeating Square Dots Backgrounds in CSS

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

"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: 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:"

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

"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. This took me a sec to understand, but it's essential"

A repeating dot pattern can be created by drawing a small tile and repeating it across the background using background-repeat. The tile size is controlled with background-size, such as a 100px square that repeats over the full element. To make square dots, the tile can be filled with layered shapes that visually combine into a small square and then repeat. A key limitation is that masking requires a solid color, which prevents using gradients or images behind the dots without additional techniques. Conic gradients can solve this by defining bands of solid color with hard stop color stops, leaving most of the tile transparent and coloring only the dot area.

Read at Frontendmasters