Design Atlas
한국어
✦ Visual effects

Retro grid

레트로 그리드

A perspective-tilted grid floor that scrolls endlessly into the distance — the synthwave-poster background.

Also known as: Synthwave floorPerspective grid background
···
html
<div class="scene"><div class="grid"></div><div class="fade"></div></div><h1>RETRO</h1>
css
.scene{position:absolute;inset:0;overflow:hidden;perspective:220px;
  background:linear-gradient(180deg,#0d0620 0%,#1a0b35 55%,#2a0f42 100%)}
.grid{position:absolute;left:-50%;right:-50%;bottom:0;height:70%;
  transform:rotateX(72deg);transform-origin:bottom;
  background-image:linear-gradient(90deg,rgba(255,90,220,.55) 1px,transparent 1px),
    linear-gradient(0deg,rgba(255,90,220,.55) 1px,transparent 1px);
  background-size:40px 40px;animation:scroll 1.4s linear infinite}
.fade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,#1a0b35 78%)}
@keyframes scroll{to{background-position:0 40px}}
h1{position:relative;margin:0;color:#fff;font-size:clamp(36px,9vmin,60px);font-weight:800;letter-spacing:.08em;
  text-shadow:0 0 18px #ff5adc,0 0 42px #7b3dff}

Build a flat grid background (two overlapping linear-gradients as ruled lines), then give the parent a perspective and lay the grid itself back with transform: rotateX(). The lines now converge toward the horizon like a real floor.

Keep animating background-position in one direction (say, vertically) and the floor appears to scroll endlessly toward the camera. Fading the grid's far edge into the background colour with a gradient overlay sells the horizon disappearing into haze.

It's the same idea as tilting a real 3D mesh in three.js for a synthwave grid, but this version is a much lighter CSS trick — just one 2D background layer and a transform.

When to use

Use for synthwave/Y2K hero backgrounds and event pages. If placing text over it, add a dark overlay so the grid lines don't hurt legibility.