- Create a css grid using
background-image
.grid {
width: 100%;
height: 100%;
background-image: repeating-linear-gradient(
90deg,
transparent calc(1px + var(--grid-blur)),
transparent var(--grid-size),
var(--grid-color, black)
calc(var(--grid-size) + 1px + var(--grid-blur, 0px))
),
repeating-linear-gradient(
180deg,
var(--grid-color, black) 6%,
transparent calc(1px + var(--grid-blur, 0px)),
transparent var(--grid-size),
var(--grid-color, black)
calc(var(--grid-size) + 1px + var(--grid-blur, 0px))
);
}
then transfrom it to make it look like a flat plane:
transform: perspective(10vh) rotateX(47deg) translateZ(41px);