html – Semi-transparent "grid / grid" CSS effect


I am trying to set a "grid / grid" CSS effect to an integer.

On this website you can see the example (it covers the entire first section and the navbar)

I could not find in your CSS the value that generates said effect

Any ideas?


They achieve this effect with a 2×2 pixel image, and the ::after pseudo ::after

.dotted:after {
  background: url("../img/pattern_dot.png") repeat left top rgba(0,0,0,0.5);
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  position: absolute;
  top: 0;
  bottom: 0;
Scroll to Top