dotted background with pure html/css

Question

I need to style element background with dots like in the picture. Tried a lot of from the web but I need exactly like in the pictre

I don't understand all things connected to the linear-gradient found smth like "background-blend", "radial-gradinet" but I can't get exactly what I want.

background:
            linear-gradient( /* background color fading left to right , to blend with every others gradient bg */
                    to left,
                    #fff,
                    #fff),
            repeating-linear-gradient( /* horizontal white lines hidding a row of dots */
                    to bottom,
                    transparent 0,
                    transparent 32px,
                    white 32px,
                    white 40px,
                    transparent 40px
            ),
            repeating-linear-gradient( /* vertical lines hidding a col of dots */
                    to right,
                    transparent 0,
                    transparent 32px,
                    white 32px,
                    white 40px,
                    transparent 40px
            ),
            radial-gradient( /* dot repeated via background-size */
                    circle at 5px 5px,
                    #2f4e79 1px,
                    transparent 2px,
                    transparent 8px
            )
            0 0 / 8px 8px;

    background-blend-mode:
            multiply, /* only blend the first layer to keep dots hidden */
            normal,
            normal,
            normal;

here is what I get https://jsbin.com/poyoqajima/edit?html,css,output

Try to provide us with the latest working code on a sandbox like [tag:jsbin] — SaidbakR, Dec 26 '21 at 18:57
https://jsbin.com/poyoqajima/edit?html,css,output here is the code — Hovhannes Gevorgyan, Dec 26 '21 at 19:01

sandeep.kgp · Accepted Answer · 2021-12-26T19:35:51.620

1

.dotted {
height:500px;
width:500px;
  background-image: radial-gradient(#ccc 10%, transparent 10%),
      radial-gradient(#ccc 10%, transparent 10%);
  background-color: #fff;
  background-position: 0 0, 50px 50px;
  background-size: 50px 50px;
}

<div class='dotted'></div>

you can play around with colors and size

edited Dec 26 '21 at 19:35

answered Dec 26 '21 at 19:30

sandeep.kgp

847
2
10

score 0 · Answer 2 · answered Dec 26 '21 at 19:37

you can use this pattern

body{margin:0;}

<div style="height: 100vh">
  <svg width="100%" height="100%">
    <defs>
        <pattern id="pattern-bg" x="0" y="0" width="80" height="80" viewBox =”0 0 80 80” patternUnits="userSpaceOnUse">                         <circle fill="#bee9e8" cx="20" cy="20" r="12.5"></circle>
        </pattern>
    </defs>
    <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-bg)"></rect>
</svg>
</div>

size and color of circles you can change

dotted background with pure html/css

2 Answers2