How to make a background of balls with CSS?

Navigation
7

I was wanting to make a dotted background, like a lot of balls to do background of a site,

Example of what I'm trying to do.

IsitpossibletoachievethisresultwithCSSonlywithoutneedinganimage?

Itriedwithrepeating-radial-gradient,butitdidnotworkverywell...

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}
body {
    background-image: repeating-radial-gradient(circle, red 0%, red 50%, transparent 50%, transparent 100%);

}
    
asked by anonymous 19.10.2018 / 19:53

1 answer

9

As two patterns, you can use multiple background images, where images are generated by CSS itself.

To draw the circle: 

background-image: radial-gradient(circle, yellow 0%, yellow 15%, transparent 15%, transparent 100%)

Just changing the color to the other colors.

See an example: 

body {
  background-image: radial-gradient(circle, gold 0%, gold 15%, transparent 15%, transparent 100%),
                    radial-gradient(circle, red 0%, red 15%, transparent 15%, transparent 100%);
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
}

Leaving the most dynamic pattern

If you want to make it a bit more dynamic, you can put the base dimension in a CSS variable and use calc to calculate the positions. For example: 

body {
  --size: 20px;
  background-image: radial-gradient(circle, gold 0%, gold 15%, transparent 15%, transparent 100%),
                    radial-gradient(circle, red 0%, red 15%, transparent 15%, transparent 100%);
  background-size: var(--size) var(--size);
  background-position: 0 0, calc(var(--size)/2) calc(var(--size)/2);
}

Another interesting question about setting patterns in background using images that might be useful to anyone reading this answer is:

19.10.2018 / 20:48
After all PhoneGap (Apache Cordova) actually compiles applications in PURE native code? What do security modules commonly used on bank sites?