I recently came across a sensible request for assistance.
Paweł Grzybek from Mastodon asked about small square dots, similar to this example from atproto.com:
Here’s how to repeat them using CSS:
First, we define a smaller area for repetition via `background-size`. Let’s try this:
“`css
html {
background-size: 100px 100px;
background-repeat: repeat;
}
“`
This creates a 100px square repeating across the background. Now, fill that square with a smaller square that repeats.
Instead of drawing each dot, we can simulate the appearance of square dots with a three-layer system using gradients:
“`css
html {
background:
linear-gradient(to bottom, transparent 10px, white 10px),
linear-gradient(to right, transparent 10px, white 10px),
black;
}
“`
Using `conic-gradient` is a more refined approach, as Eric Meyer suggested, to achieve transparent backgrounds:
“`css
html {
background-image:
conic-gradient(
from 0deg at 5px 5px,
transparent 75%, black 75% 100%
);
}
“`
This designates the conic gradient center at a specific point, making most areas transparent, leaving the remainder as the dot. Adjusting the size and repetition achieves the desired square dot effect on a transparent background.