Isometric 3D Wireframe Grid

Colours in this gradient

• #050814
• #3b82f6
• #1d4ed8
• #60a5fa

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="iso-wrapper">
  <div class="iso-plane"></div>
  <div class="iso-vignette"></div>
  <div class="iso-content">
    <div class="iso-pill">Infrastructure Plane</div>
    <h1>Global Mesh Fabric</h1>
    <p>Perspective-projected coordinate terrain with infinite distance horizon fade.</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 perspective 3D isometric wireframe grid background in HTML and CSS.

Requirements:
- Dark space background (#050814).
- 3D perspective plane with rotateX(65deg) creating an infinite floor effect.
- Tiled 60px grid pattern created using two linear-gradient strokes.
- Linear vertical animation scrolling forward smoothly.
- Radial vignette mask on top to fade horizon and edges into black.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Set perspective on wrapper and rotate plane with transform: rotateX(65deg).

2. 2

   Generate grid with two perpendicular linear gradients.

3. 3

   Animate background-position along Y axis for endless forward movement.

Customisation tips

• Add a radial vignette overlay so the sharp grid edges fade seamlessly at the horizon.

More backgrounds