Retro Grid — Free HTML CSS Synthwave Hero Background Snippet

The retro grid is the 80s synthwave staple: a glowing neon grid floor that recedes to a horizon and races endlessly toward the viewer, lit by a striped retro sun. It is the backdrop of choice for vaporwave, outrun, and game-themed sites. This snippet builds the whole scene with pure CSS perspective and a couple of optional lines of JavaScript — no canvas, no images.

The perspective floor

The grid lives in a container with perspective: 240px and a child plane that is rotated flat with transform: rotateX(72deg) and transform-origin: bottom. That low perspective value combined with the steep rotation tips the plane almost flat and exaggerates the foreshortening, so the lines compress toward a vanishing point — the signature receding-floor look. The plane itself is just two layered linear-gradient backgrounds (pink horizontals, cyan verticals) tiled at 44px, the same graph-paper trick used for any CSS grid, here viewed in 3D.

Making it race forward

Animating the plane toward the viewer is a one-line keyframe: rgRun shifts background-position down by exactly one tile (44px) over 1.6 seconds and loops. Because the grid pattern repeats every 44px, moving by one full cell lands on an identical pattern, so the loop is seamless — the lines appear to stream continuously toward you with no visible jump. The plane is oversized (inset: -60% at the top) so the scrolling lines fill the perspective without revealing an edge near the horizon.

The retro sun

The sun is a circle filled with a vertical yellow-to-pink gradient and a soft glowing box-shadow. Its iconic horizontal slats come from an ::after pseudo-element: a repeating-linear-gradient of background-colored bars, masked so the stripes only appear across the lower half (mask: linear-gradient(transparent 55%, #000 55%)). That mask is what gives the classic synthwave sun its half-banded look without drawing each stripe by hand.

The color story

A vertical background gradient runs from deep indigo at the top through magenta to near-black at the bottom, so the sky glows behind the sun and darkens toward the grid. The headline uses a top-down background-clip: text gradient with a soft text-shadow glow, and the tag and copy use neon cyan and violet — all the hallmarks of the outrun palette. Everything is CSS, so recoloring the whole scene is a handful of values.

The optional script

The animation is entirely CSS, but two small JavaScript conveniences are included: a visibilitychange listener pauses the grid when the tab is hidden to spare the GPU, and a tiny window.retroGrid.speed(seconds) helper lets you retune the run speed at runtime (for example, to accelerate on a button press). Neither is required for the effect to work.

Customizing it

Change the perspective and rotateX to steepen or flatten the floor, adjust the 44px tile size for a denser or wider grid, retime rgRun for a faster or slower race, recolor the line gradients and sun, or move the horizon by resizing the grid container. Pair it with an aurora text headline or a pulse button for a complete retro hero.