# Neon synthwave grid background
> A retro synthwave scene: striped sun, mountain horizon, an endlessly scrolling perspective neon grid and a flickering neon title.
- Category: Developer tools
- Version: 1.0
- Source: https://ownlyplans.com/bhaskar/neon-synthwave-grid-background/
## 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.
## Tech stack
- Animation
- CSS
- HTML
## Build steps
### 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.
Prompt:
```text
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.
## Assets
### prompt.md — The full prompt.
~~~~
# Neon synthwave grid background
Copy this prompt into Claude, Cursor or Lovable.
```text
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.
```
~~~~
### index.html.md — Complete code of the result in the video.
~~~~
# index.html
The finished result as one file. Save it as index.html and open it.
```html
Neon grid
SYNTHWAVE // 1984
NIGHT DRIVE
```
~~~~
## Build instructions by tool
### Claude Code
Open a terminal in an empty folder, run `claude`, then paste the prompt.
```text
Build the "Neon synthwave grid background" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/neon-synthwave-grid-background/.
Stack: Animation, CSS, HTML.
Follow the plan's steps in order: Paste the prompt → Add horizon and mountains → Build the perspective grid → Add title, button and scanlines.
Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md.
Ask me before adding anything not in the plan. (Prepared for Claude Code.)
```
### Cursor
Open an empty folder in Cursor, start an Agent chat, then paste the prompt.
```text
Build the "Neon synthwave grid background" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/neon-synthwave-grid-background/.
Stack: Animation, CSS, HTML.
Follow the plan's steps in order: Paste the prompt → Add horizon and mountains → Build the perspective grid → Add title, button and scanlines.
Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md.
Ask me before adding anything not in the plan. (Prepared for Cursor.)
```
### Lovable
Start a new Lovable project and paste the prompt as your first message.
```text
Build the "Neon synthwave grid background" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/neon-synthwave-grid-background/.
Stack: Animation, CSS, HTML.
Follow the plan's steps in order: Paste the prompt → Add horizon and mountains → Build the perspective grid → Add title, button and scanlines.
Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md.
Ask me before adding anything not in the plan. (Prepared for Lovable.)
```
## Definition of done
- Every build step is complete and the app runs locally.
- The main user flow works end to end.
- Share your build on OwnlyPlans with a demo link, build time and tool.