3D Cyber Perspective Grid

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="grid-scene">
  <div class="horizon-glow"></div>
  <div class="grid-plane"></div>
  <div class="content">
    <span class="badge">Next-Gen Interface</span>
    <h1>Infinite Horizons</h1>
    <p>Pure CSS 3D perspective plane with smooth continuous forward travel.</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 a retro-futuristic 3D perspective grid background using pure HTML and CSS.

Requirements:
- Deep dark backdrop (#03040b) with CSS perspective on the parent container.
- An animated grid plane rotated on the X-axis (rotateX: 75deg) using dual linear-gradient grid lines.
- Smooth infinite translateY animation that loops cleanly at background-size intervals (60px).
- A glowing horizontal neon beam across the horizon (cyan and purple box-shadow).
- A vertical mask-image fade so the grid fades naturally into the horizon.
- Centered typography badge, heading, and subtitle.
- Zero JavaScript, respect prefers-reduced-motion.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Set perspective: 500px on the container to establish 3D viewport depth.

2. 2

   Draw the grid mesh using intersecting linear-gradient background patterns.

3. 3

   Rotate the plane on the X axis to create the illusion of a ground floor.

4. 4

   Animate translateY by the exact repeat size (60px) for seamless looping.

5. 5

   Position a glowing horizon line at the vanishing midpoint.

Customisation tips

• Set mask-image gradient so grid lines fade smoothly into the horizon rather than cutting abruptly.
• Use tabular numbers or fixed pixel background-size to prevent jump artifacts in the animation.

More backgrounds