0
219
Viewsdotted background with pure html/css
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
·
Santiago Trujillo
2 answers
Answer question0
.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
·
Santiago Trujillo
Report
0
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
·
Santiago Trujillo
Report
Answer question