Free Background

Retro CRT Terminal Backdrop

A vintage CRT monitor effect with animated horizontal scanlines, radial edge vignette, and glowing phosphorescent green text.

dark
retro
crt
scanline
terminal
matrix
hacker

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="crt-screen">
  <div class="scanlines"></div>
  <div class="crt-vignette"></div>
  <div class="crt-terminal">
    <div class="crt-code">&gt; SYSTEM ARCHITECTURE READY...</div>
    <div class="crt-code">&gt; RUNNING PROTOCOL 0x4829F...</div>
    <h1>TERMINAL ONLINE</h1>
    <p>Phosphor green scanline raster simulation in pure CSS.</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.

Works with Claude · ChatGPT · Cursor · v0 · Bolt · Gemini

Create a retro CRT terminal monitor background with scanlines and green phosphor glow in pure HTML and CSS.

Requirements:
- Deep dark green monitor background (#020b05).
- Tiled scanline pattern using a 4px linear-gradient with pointer-events: none.
- Radial gradient vignette around viewport edges to mimic curved glass monitors.
- Phosphor green typography with matching text-shadow glow effect.
- Zero JavaScript.

Return one HTML file with a <style> block.

How to build it, step by step

1
Layer a repeating horizontal scanline gradient across the full viewport.
2
Add a radial vignette overlay darkening the four outer corners.
3
Apply neon text-shadow to typography to mimic cathode ray tube phosphor blooming.