Shadcn.io is not affiliated with official shadcn/ui
React Retro Grid Background
80s synthwave perspective grid with infinite scrolling animation—that classic Tron/outrun look
That classic 80s aesthetic—a perspective grid rushing toward you like you're flying through a neon cyberscape. This uses CSS perspective and a rotated X-axis to create the illusion of a ground plane extending to the horizon. The grid scrolls infinitely by translating a massive repeating background pattern. There's a gradient fade at the bottom so lines disappear into the distance naturally. It's all pure CSS, no canvas, so it's super lightweight. The angle, cell size, and line color are all configurable. Great for synthwave themes, retro gaming, vaporwave aesthetics, or any landing page that wants that timeless Tron-style futurism.
React Retro Grid Background preview
Installation
Related Components
Grid Pattern
Static SVG grid
Flickering Grid
Animated matrix grid
Warp Background
Hyperspace star field
Gradient Animation
Flowing gradient colors
Hexagon
Honeycomb pattern grid
Boxes
Interactive isometric grid
FAQ
Was this page helpful?
Sign in to leave feedback.