Matrix rain background
Columns of characters fall with a glowing trail, drawn on a canvas. Full‑screen, with HTML, CSS and a few lines of JS.
Settings
Code
<div class="pt-matrix"><canvas></canvas></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Backgrounds
Where to use it
The Matrix rain background still works whenever a site wants to look like it lives inside a terminal: a cybersecurity firm, a hackathon or CTF page, a developer’s portfolio, a tongue‑in‑cheek 404. Katakana, numbers and symbols pour down in columns with a bright head and a fading trail, and all three colours are yours to change.
It keeps running for visitors who asked for less motion, so add that check yourself if it covers a large area. Density changes the size of the characters. With text on top, lower the opacity so the rain stays in the background.