Thread by @vponamariov

Do you know how to make a dotted background with CSS?

Once I found the code but didn't understand the magic.

Here is a detailed explanation 👇

As a container, I'll use the body tag.

To make a dotted background we will use a combination of linear gradients.

Let's make something illustrated below.

The red background takes 20px.
Then goes green which takes 1-100%, in other words - the rest space.

Now, if we set background-size we can repeat the pattern which will look like on the image below.

The first value doesn't matter in this case since it's repeated horizontally.

But the second value is important - it's the space between the lines.

Now, if we replace red with white and make green - transparent, we will have this pattern.

Pay attention that it's not a white-black stripe, it's a black-transparent stripe.

The body is white, that's why we see white lines.

Now, if we add another gradient but this time rotate it to 90deg, we'll actually have the dotted background.

If you use SCSS you can enhance this example and have flexibility over dots sizes and dots spacing.