Cyberpunk Digital Rain Canvas

Colours in this gradient

• #000000
• #10b981
• #22c55e
• #052e16

The code

Plain HTML, CSS and JavaScript 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="matrix-stage">
  <canvas id="matrixCanvas" class="matrix-canvas"></canvas>
  <div class="matrix-overlay"></div>
  <div class="matrix-content">
    <div class="matrix-badge">System Protocol v4.2</div>
    <h1>Decrypted Stream</h1>
    <p>High-frequency digital phosphor waterfall rendered with native 60fps HTML5 Canvas API.</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 classic Matrix cyberpunk digital rain canvas background in HTML, CSS and vanilla JavaScript.

Requirements:
- HTML5 canvas filling full viewport.
- Falling character streams using alphanumeric and katakana glyphs.
- Semi-transparent black fillRect on each animation frame to create phosphorescent green fading trails.
- Responsive window resize listener.
- Dark radial vignette overlay keeping center text legible.

Return one HTML file with <style> and <script> tags.

How to build it, step by step

1. 1

   Initialize canvas and calculate columns = canvas.width / fontSize.

2. 2

   Store drop Y positions in an array.

3. 3

   In draw loop, fade previous frame with rgba(0, 0, 0, 0.05) and draw random characters in green.

Customisation tips

• Use requestAnimationFrame instead of setInterval for smooth 60fps rendering without jank.

More backgrounds