Making a dotted grid with CSS

Question

I want the whole body to have a dotted grid

body {
  background-image: radial-gradient(black 1px, transparent 0);
  background-size: 40px 40px;
}

The problem is that I want to shift it so that a dot is placed at the point (0, 0), i.e. the top left corner of the body. So the whole structure should be shifted at -20px, -20px. Or probably there is a better solution?

Caracaraballo

Answer 1

Update

The following solution works, but only for a fixed background-size. See @Temani Afif's answer for a better solution.

Answer

You can use the background-position CSS property to do exactly what you were thinking.

body {
  background: white;
  background-image: radial-gradient(black 1px, transparent 0);
  background-size: 40px 40px;
  background-position: -19px -19px;
}

Metcalf

Thanks, that's exactly what I wanted!! Strangely, I tried it, putting it above the whole code and it didn't work. – Caracaraballo

In your case, you are utilizing the background shorthand property which you could supply a host of parameters. If you put the background-position property (or any other specific property for the background) before the background shorthand property, then it will be overridden by the shorthand property filling in default values. It is important that anywhere you use a shorthand property to set it first, then set any specific properties. Other examples of shorthand properties include animation, flex, transition, etc. – Metcalf

Thank you so much for the explanation! Indeed, I've forgotten about the shorthandedness of background. – Caracaraballo

Unfortunately the radial-gradient approach results in circles drawn without antialiasing. One alternative would be using a Houdini worklet to customize the painting process and draw them as shown in codepen.io/arnellebalane/pen/yLVOOgW however, as of early 2023, Houdini is only supported in Chromium-based browsers (not Firefox or Safari). – Stationary

Answer 2

Here is another way in addition to changing the background-position that may work whataver the size is:

body {
  background-image: radial-gradient(circle at 1px 1px, black 1px, transparent 0);
  background-size: 40px 40px;
}

body {
  background-image: radial-gradient(circle at 1px 1px, black 1px, transparent 0);
  background-size: 50px 30px;
}

Basically the idea is to change the position of the dots inside the area defined by background-size to the top/left instead of shifting all the background

Iowa

Very nice! Could you please explain do at 2px 2px and 1px mean? – Caracaraballo

@EugeneBarsky the 1px is basically the radius of the circle (since we are using radial-gradient) so I should place the center of the circle at 2px 2px, it could also be 1px 1px, should give the same result .. here is an example with bigger value to better see : jsfiddle.net (radius 10px and we place the center at 10px 10px) – Iowa

@EugeneBarsky edited the answer to avoid confusion so we place it at 1px 1px which is the radius ... and of course you can place it where you want (initially I made it 2px 2px to make it a bit far from the edge) – Iowa

Thank you for the explanations! Unfortunately the link to jsfiddle doesn't work. – Caracaraballo