Cybernetic Sonar Radar Scanner

Colours in this gradient

• #020617
• #06b6d4
• #10b981
• #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="radar-stage">
  <div class="radar-dish">
    <div class="radar-sweep"></div>
    <div class="radar-circle rc-1"></div>
    <div class="radar-circle rc-2"></div>
    <div class="radar-circle rc-3"></div>
    <div class="radar-cross-h"></div>
    <div class="radar-cross-v"></div>
    <div class="radar-blip rb-1"></div>
    <div class="radar-blip rb-2"></div>
  </div>
  <div class="radar-content">
    <div class="radar-badge">Active Sonar Scan</div>
    <h1>Telemetry Scanner</h1>
    <p>360-degree conic sector sweeps tracking distributed telemetry anomalies.</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 cybernetic sonar radar scanner background in pure HTML and CSS.

Requirements:
- Circular radar grid with concentric dashed coordinate rings and crosshair axes.
- Continuous 360-degree rotating radar sweep using conic-gradient.
- Pulsing green signal blip dots located at target coordinates.
- Centered typography on top.
- Zero JavaScript.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Assemble circular coordinate dish with concentric dashed circles.

2. 2

   Animate conic-gradient sector with rotate(360deg).

3. 3

   Add glowing signal echo dots that pulse on coordinate intersections.

Customisation tips

• Use conic-gradient fading to transparent to create an authentic sonar sweep tail.

More backgrounds