user3715648 user3715648 - 10 days ago 4x
CSS Question

Trying to make a configurable polka dot background using just CSS

I'm trying to make a grid background out of dots. I can't just use an image, because I need everything to be configurable:

  • background color

  • dot color

  • dot size

  • space between dots

Unless there's a better solution, I think the only way I can achieve this is with pure CSS. I've done some looking around and so far the closest thing i've found is using a radial-gradient. I'm having trouble though; I haven't been able to find a solution that lets me configure both the dot size and the space between dots while keeping a circle shape. I've gotten close, but than my dots end up looking like diamonds instead of circles. Here's what i've come up with so far:

body {
background-image: radial-gradient(black 2px, white 2px);
background-size:40px 40px;

Does anyone have any suggestions? Initially i'd like to have my dots be 2px x 2px and 40 px apart. Is there a better way to do this, or am I just configuring my gradient incorrectly? I think i'm close, but depending on how I zoom they look like either circles, diamonds or squares and I need it to always look like circles.


Using %:
Using vw:

Here is an example. I really hope this helps you.

html {
 width: 100px;
body {
 /* Controls size of dot, First value scales width and height of dot */
 background-image: radial-gradient(black 10%, white 10%);
 /* Controls Spacing, First value will scale width, second, height between dots */
 background-size: 40% 400%;