80s Outrun Synthwave Horizon

Colours in this gradient

• #0f051d
• #ec4899
• #f59e0b
• #701a75

The code

Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="outrun-stage">
  <div class="outrun-sun">
    <div class="sun-bars"></div>
  </div>
  <div class="outrun-grid"></div>
  <div class="outrun-content">
    <div class="outrun-badge">Neon Nostalgia</div>
    <h1>Outrun Horizon</h1>
    <p>Perspective vector wireframe plane converging towards a retro-futuristic synthwave dusk.</p>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same background, then ask it to adapt the colours, text or framework to your project.

Create an authentic 80s synthwave outrun perspective grid and striped sun background in pure HTML and CSS.

Requirements:
- Striped gradient sun with horizontal cutouts across bottom half.
- Perspective ground grid with perspective(300px) rotateX(65deg) scrolling forward.
- Neon magenta and hot pink grid lines with depth mask fade.
- Zero JavaScript.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Build retro striped sun using repeating-linear-gradient over bottom half.

2. 2

   Perspective tilt a two-axis grid with transform: perspective(300px) rotateX(65deg).

3. 3

   Animate grid background-position along Y axis.

Customisation tips

• Use mask-image: linear-gradient(to top, black 40%, transparent 100%) so the ground grid fades seamlessly into the horizon.

More backgrounds