Contour Topography Wave Lines

Colours in this gradient

• #030712
• #06b6d4
• #3b82f6
• #ffffff

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="topo-stage">
  <div class="topo-lines">
    <div class="topo-line tl-1"></div>
    <div class="topo-line tl-2"></div>
    <div class="topo-line tl-3"></div>
    <div class="topo-line tl-4"></div>
  </div>
  <div class="topo-vignette"></div>
  <div class="topo-content">
    <div class="topo-badge">Geospatial Elevation</div>
    <h1>Topographic Contours</h1>
    <p>Mathematic vector elevation contours undulating with harmonic sine waves.</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 animated contour topographic wave line background in pure HTML and CSS.

Requirements:
- Multi-layered undulating curved contour lines with glowing cyan and violet borders.
- Smooth CSS keyframe oscillation altering rotate, translateY, and scaleY.
- Radial dark vignette focusing light on the center.
- Zero JavaScript.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Use curved elements with large border-radius and top border stroke.

2. 2

   Animate elevation waves using translate and scale transforms.

3. 3

   Layer dark vignette over edges.

Customisation tips

• Vary animation periods (12s, 14s, 16s) so lines never synchronize into repetitive patterns.

More backgrounds