<div class="horizontal"></div>
<div class="vertical"></div>
<div class="dots"></div>

*{
  margin:0px;
  padding:0px;
}
html{
  height:100vh;
}
body{
  background: #000000;
  height:100vh;
}
.horizontal, .vertical, .dots{
  position:absolute;
  height:100%;
  width:100%;
}
.horizontal{
    background-image: repeating-linear-gradient(180deg, transparent, transparent 22px, hsla(255,255%,255%,.2) 0, hsla(255,255%,255%,.2) 28px, transparent 0, transparent 50px);
}
.vertical{
    background-image: repeating-linear-gradient(90deg, transparent, transparent 22px, hsla(255,255%,255%,.2) 0, hsla(255,255%,255%,.2) 28px, transparent 0, transparent 50px);
}
.dots{
  background: radial-gradient(ellipse at center, #ffffff 0, #ffffff 5px,hsla(255,255%,255%,.2) 0, hsla(255,255%,255%,.2) 8px, transparent 0);
  background-size: 50px 50px;
}