원근감 있게 기울어진 격자 바닥이 화면 안쪽으로 끝없이 흘러가는 신스웨이브풍 배경.
디자인 아틀라스<div class="scene"><div class="grid"></div><div class="fade"></div></div><h1>RETRO</h1>.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}평평한 격자 배경(linear-gradient 두 장을 겹친 눈금선)을 만든 뒤, 부모에 perspective를 주고 격자 자체는 transform: rotateX()로 크게 눕힙니다. 그러면 격자가 바닥처럼 멀어질수록 좁아져 보입니다.
여기에 background-position을 한 방향으로 계속 이동시키면(예: 세로로) 바닥이 카메라 쪽으로 끝없이 흘러오는 느낌이 납니다. 격자 위쪽 끝에 배경색으로 향하는 그라데이션을 겹쳐두면 수평선이 안개 속으로 사라지는 것처럼 자연스럽게 마무리됩니다.
three.js로 실제 3D 메시를 눕혀 만드는 신스웨이브 그리드 항목과 원리는 같지만, 이 버전은 2D 배경 한 장의 transform만으로 만드는 훨씬 가벼운 CSS 트릭입니다.
신스웨이브·Y2K 무드의 히어로 배경, 이벤트 페이지에 씁니다. 위에 텍스트를 올릴 땐 격자와 겹쳐 가독성이 떨어지지 않도록 어두운 오버레이를 한 장 더 깔아주세요.