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.

Build with AI

Build, Understand, Optimize, and Extend It With AI

You do not have to reverse-engineer the 3D illusion by hand. Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly why the low perspective value combined with the steep rotateX angle is what tips the plane into a receding floor, and why the keyframe only needs to shift background-position by exactly one tile size to loop seamlessly forever. The same assistant can help you optimize it — ask whether animating background-position (which is not a compositor-only property) could be replaced with a translateY transform loop for smoother performance on lower-end GPUs, especially since the visibilitychange pause already shows performance awareness. It's also useful for extending the scene: ask it to add parallax scrolling stars behind the sun, make the grid react to scroll position instead of running on a timer, or add a second color scheme swappable via a CSS custom property. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Build an animated synthwave "retro grid" hero background in plain HTML and CSS, with only a couple of optional JavaScript conveniences — no canvas, no images, no library.

Requirements:
- Create a perspective floor using a container with a CSS perspective value and a child "plane" element rotated with transform rotateX at a steep angle (setting transform-origin to the bottom edge), so the plane appears to recede toward a horizon rather than lying flat on screen.
- Build the grid lines on that plane using two layered CSS linear-gradient backgrounds (one for horizontal lines, one for vertical), tiled at a fixed pixel size — do not use an image or SVG for the grid.
- Animate the grid endlessly racing toward the viewer using only a CSS keyframe that shifts background-position by exactly one tile's worth of pixels and loops infinitely, so the restart is invisible because the pattern is identical at that offset.
- Size the plane element larger than its container (extending well above the visible area) so the scrolling lines fill the whole perspective without ever revealing a hard edge near the horizon.
- Build a glowing retro sun as a circle with a vertical two-color gradient fill and a soft blurred box-shadow glow, then add horizontal banding stripes across only its lower half using a repeating-linear-gradient pseudo-element clipped with a CSS mask so the stripes fade in starting partway down the circle.
- Add a small optional JavaScript enhancement: pause the CSS animation via animationPlayState when the page visibility changes to hidden (and resume when visible again), to avoid wasting GPU cycles on a backgrounded tab.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Step by step

How to Use

1
Paste HTML, CSS, and JSA neon grid floor and a striped sun fill the hero.
2
Watch it raceThe grid lines stream endlessly toward the horizon.
3
Note the sunHorizontal slats band its lower half, synthwave style.
4
Switch tabsThe grid pauses while hidden to save the GPU.
5
Retune the speedCall window.retroGrid.speed(seconds) at runtime.
6
Recolor the sceneEdit the gradient and sun colors.

Real-world uses

Common Use Cases

Synthwave landing pages

Pair with an aurora text headline.

Game and arcade sites

Set the mood behind a pulse button CTA.

Music and DJ pages

A retro backdrop for an app hero.

Event microsites

Frame a shiny text announcement.

Retro portfolios

An 80s alternative to a minimal hero.

CSS perspective demos

A reference for animated receding grids.

Got questions?

Frequently Asked Questions

The grid container has perspective: 240px and its child plane is rotated with rotateX(72deg) and transform-origin: bottom. The low perspective value plus the steep rotation tips the plane nearly flat and exaggerates the foreshortening, so the gridlines compress toward a vanishing point — the classic receding-floor look, all in CSS.

The rgRun keyframe shifts the plane background-position down by exactly one 44px tile and loops. Because the grid pattern repeats every 44px, moving by one full cell lands on an identical pattern, so the restart is invisible and the lines appear to stream continuously toward the viewer.

The sun is a circle with a vertical yellow-to-pink gradient and a glowing box-shadow. Its horizontal slats come from an ::after repeating-linear-gradient of background-colored bars, masked with a linear-gradient so the stripes only show across the lower half. The mask gives the iconic half-banded sun without drawing each stripe manually.

Not very — it animates only background-position on one element, which the compositor handles efficiently. A visibilitychange listener also pauses it when the tab is hidden to spare the GPU. For very low-end targets you can slow the keyframe or enlarge the tile size to reduce the number of lines.

The scene is pure CSS, so drop the markup into a component and keep the classes. Add the visibilitychange listener in a mount effect with cleanup, and expose the speed control as a prop that sets the animation-duration via a ref or inline style instead of the global helper. In Tailwind, build the plane with a bg-[linear-gradient(...)] arbitrary value and define the run keyframe in the config.

Loading…