Retro grid
Also called synthwave grid, perspective grid, or outrun grid
A neon floor grid in perspective that slides toward the viewer and fades out at the horizon, borrowed from 1980s synthwave art.
import type { ReactNode } from 'react';
import { motion, useReducedMotion } from 'motion/react';
const CELL = 60; // px between grid lines
const LINES =
'bg-[linear-gradient(to_right,#ec4899_1px,transparent_1px),linear-gradient(to_bottom,#ec4899_1px,transparent_1px)] bg-size-[60px_60px]';
export function RetroGridHero({ children }: { children: ReactNode }) {
const reduceMotion = useReducedMotion();
return (
<section className='relative isolate grid min-h-[520px] place-items-center overflow-hidden bg-slate-950 text-white'>
<div
aria-hidden
className='absolute inset-x-0 bottom-0 -z-10 h-1/2 overflow-hidden [perspective:300px]'
>
{/* Tilted back from its bottom edge, the plane recedes toward a
horizon near the top of this box. It is wide so its sides
never show. */}
<div className='absolute inset-x-[-300%] bottom-0 h-[400%] origin-bottom [transform:rotateX(65deg)]'>
<motion.div
// One cell toward the viewer, then repeat: the reset is invisible.
animate={reduceMotion ? undefined : { y: [0, CELL] }}
transition={{ duration: 1, ease: 'linear', repeat: Infinity }}
className={`absolute inset-x-0 -top-[60px] bottom-0 ${LINES}`}
/>
</div>
{/* Fade the far rows into the sky, and glow along the horizon. */}
<div className='absolute inset-0 bg-linear-to-b from-slate-950 from-10% to-transparent to-70%' />
<div className='absolute inset-x-0 top-0 h-px bg-pink-500 shadow-[0_0_24px_4px_rgb(236_72_153/0.6)]' />
</div>
{children}
</section>
);
}Add a retro grid to the bottom half of the dark hero: pink 1px lines every 60px on a plane tilted with rotateX(65deg) from its bottom edge, inside a container with perspective: 300px. Move the grid toward the viewer by one cell per second with a linear, infinite translateY loop, fade the far rows into the sky with a gradient overlay, and add a soft pink glow line along the horizon. Animate only transform, and keep it still when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
What is Retro grid?
A retro grid lays a square grid on an imaginary floor and tilts it away from the viewer, so the lines run toward a horizon. The rows slide toward you in an endless loop, like flying low over a digital landscape. Neon pink or cyan lines on a dark sky, often with a striped sunset sun, give the classic synthwave look; faint gray lines on a light page give a quieter version for product sites.
In CSS, a container with perspective holds a tall plane tilted back with rotateX(), around 60 to 75 degrees. The plane’s background is a linear-gradient grid, and a child layer moves with translateY by exactly one cell per loop, so the reset is invisible. A gradient fades the far rows into the sky. A canvas can draw the same scene with a little projection math when you need exact control of the horizon.
Keep it behind the content, low in contrast on light backgrounds, and slow, about one cell per second. Animate only transform so the loop stays smooth, pause it off screen, and leave the grid still for people who prefer reduced motion.
Often confused with
- Grid background
- A grid background is a flat pattern behind content. A retro grid tilts the grid into a 3D floor and keeps it moving toward the viewer.
Related terms
All termsGrid background
A decorative background of thin grid lines, dots, stripes, or hexagons, often faded toward the edges, used behind hero sections and product shots.
Perspective
A CSS property that sets how far the viewer sits from a 3D scene, so rotated elements look deep up close and flatter from far away.
Looping animation
An animation that plays more than once, either a set number of times or forever, set in CSS with animation-iteration-count.
Hero section
The large first section at the top of a landing page, with a headline, a short subhead, a call to action, and a visual.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.