Neon synthwave grid background
A retro synthwave scene: striped sun, mountain horizon, an endlessly scrolling perspective neon grid and a flickering neon title.
Use it with Claude or any AI tool. Copy the prompt and paste it in. The link inside gives the AI the whole page as Markdown.
Live preview of the result built from this prompt. Click to pause.
Overview
Retro-futurism in one CSS file. A striped sunset sun pulses over a mountain line while a perspective grid scrolls toward you forever. The title flickers like real neon and scanlines sit on top.
Build it step by step
Sign in to tick steps off-
1
Paste the prompt
Paste this prompt into your AI tool. It builds everything in one go, then the steps below show what to check.
Build a single HTML file with a synthwave scene filling the viewport. Page background: linear-gradient from #0a0020 through #2a0a4a to #ff3d81. Elements, back to front: 1. A circular sun (about 40vmin) with a yellow #ffe45e to pink #ff3d81 vertical gradient, strong pink glow, horizontal dark stripes that get thicker toward the bottom (use an ::after with a repeating-linear-gradient), and a slow 4s pulse scale. 2. A dark mountain silhouette (inline SVG polygon, fill #14022b, pink 2px stroke) sitting on the horizon. 3. A glowing pink horizon line at 50% height. 4. A floor below the horizon with perspective: 360px, perspective-origin top, containing a tall element rotated rotateX(70deg) (origin top) with a cyan #00e5ff 2px grid (80px cells, drop-shadow glow). Animate background-position by 80px every 1.4s linear infinite so the grid rushes toward the viewer. 5. Title block near the top: small cyan letter-spaced "SYNTHWAVE // 1984" and a huge italic monospace H1 "NIGHT DRIVE" with layered pink/purple text-shadow glow and an occasional neon flicker keyframe (opacity dips at 92-97%). 6. A neon outlined cyan button "▶ PRESS START" at the bottom. 7. A top overlay of faint CRT scanlines (repeating-linear-gradient). Monospace system font, no external files, reduced-motion safe. Return only the complete HTML.
-
2
Add horizon and mountains
Check: SVG ridge line and glowing horizon.
-
3
Build the perspective grid
Check: rotateX floor with scrolling cyan lines.
-
4
Add title, button and scanlines
Check: Flicker animation and CRT overlay.
Done when You can see it working in the browser.
Files and links
What people built
Show yoursNobody has shared a build yet. Yours could be the first.
Show what you built
Built this plan? Sign in to share your demo video, live app and screenshots.