Create the Matrix digital rain effect online. Tune speed, glyphs, colour and trails, then export video, PNG or standalone HTML. Free, in your browser.
Knobs patch the running animation live. A few (marked in the code as baked-in values like particle counts) restart the preview.
Falling glyph columns — the classic translucent-wipe trail trick.
Your code runs in a sandboxed frame with no access to this page, and it is never sent to a server. three.js demos load the library from jsDelivr; the rest need nothing but the browser.
This generator draws the falling green character columns in a live canvas, gives you six controls to change how they behave, and lets you take the result away in three forms — a still .png, a .webm screen recording of the animation, or a self-contained .html file you can drop straight into a page. The code that produces the effect is on screen the whole time and is editable, so if you want to change something the controls do not cover, you change the JavaScript directly and it re-runs.
Nothing is uploaded. The animation runs in a sandboxed frame inside your browser, and the export files are built in the browser and handed to your downloads folder. There is no server step and no account.
Six knobs sit under the preview. Moving them patches the running animation on the next frame rather than restarting it, with one exception noted in the table.
| Control | Range | Default | What it does |
|---|---|---|---|
| Fall speed | 0.1 – 2.5 | 0.55 | Rows advanced per frame, before per-column jitter |
| Trail length | 0.01 – 0.5 | 0.08 | Opacity of the wipe painted over the canvas each frame — lower means longer tails |
| Glyph size | 8 – 40 px | 16 | Character size, which also sets the column width and therefore the column count. Restarts the animation. |
| Hue | 0 – 360 | 140 | HSL hue of the glyphs. 140 is the classic green; 200 gives cyan, 0 red. |
| Character set | Katakana, Binary, Hex, Source code | Katakana | The pool of glyphs each column draws from at random |
| Rain upward | on / off | off | Reverses the direction of travel and the recycle test |
Two things the controls deliberately do not expose: the background colour, which is fixed at a very dark green-black, and the character set contents. Both are one line of the JavaScript, so if you want a different palette or your own glyph pool, edit the code pane — the change is live.
ア through ノ) plus the digits 0–9, thirty-five glyphs in all. The 1999 film's effect was built from mirrored half-width katakana, which is why the on-screen characters in the film look almost-but-not-quite like readable Japanese. This generator uses standard, unmirrored katakana; if you want the mirrored look you would flip the canvas horizontally in the code and flip the text back, which is exactly what the film's designer did with a physical setup.0 and 1. With only two glyphs the columns read as far more repetitive, which is either the point or a problem depending on what you are making.0-9 and A-F. A good middle ground: legibly technical without the busy texture of katakana.{}[]()<>/*-+=;:$#@!&|_^~?). This is the one to pick for a developer-conference backdrop, because it reads as code at a glance rather than as decoration.This is the part that trips up most people writing the effect themselves, so it is worth stating plainly. The canvas is never cleared. There is no stored history of where glyphs have been. Each frame, a nearly transparent dark rectangle is painted over the entire canvas:
ctx.fillStyle = 'rgba(3, 8, 5, 0.08)'; ctx.fillRect(0, 0, w, h);
Every glyph already on screen therefore loses a fraction of its brightness per frame and fades toward the background. That fade is the trail. The Trail length slider is that alpha value. At the 0.08 default a glyph is effectively gone after roughly forty frames; push the slider to 0.5 and the tail collapses to a couple of characters, giving a hard, trail-free look; drop it to 0.01 and the screen turns into smoke because almost nothing ever fully fades.
If you have tried this yourself and got a single flickering row of characters with no tails, the cause is almost always clearRect at the top of the frame loop. Replace it with the translucent fill and the effect appears immediately.
Two smaller details stop the result looking mechanical. Each column gets its own random speed multiplier, so the columns do not descend as a rigid grid. And a column that reaches the bottom only restarts with a small random chance per frame rather than immediately, so the columns drift permanently out of phase instead of marching in step. Both are visible in the code pane if you want to tune them.
| Export | Format | What you get |
|---|---|---|
| Save PNG | .png | A single frame at the preview's current pixel size, background included |
| Record | .webm | A video of the canvas, VP9 or VP8 depending on browser support, no audio |
| Download | .html | A standalone page carrying your current HTML, CSS, JavaScript and control values |
| Copy | clipboard | The contents of whichever code pane is showing |
| Share | URL | A link with your edited code encoded into the fragment |
There is no GIF export. If you need a GIF, record the .webm and convert it — ffmpeg -i matrix-rain.webm -vf "fps=15,scale=640:-1:flags=lanczos,split[a][b];[a]palettegen[p];[b][p]paletteuse" out.gif is the usual recipe, and the palette-generation step matters here because the effect is mostly one hue over near-black and a naive 256-colour quantisation bands the fades badly.
Three things worth knowing before you record:
The Download button gives you a complete HTML document, not a fragment. To use the effect as a page background rather than a whole page, take the JavaScript out of that file and put the canvas behind your content: give the <canvas> position: fixed, full width and height, and a negative z-index, then let your content sit above it with its own stacking context.
Performance is the thing to watch. The animation costs roughly one fillText call per column per frame, twice over — head glyph and dimmer follower. Column count is canvas width divided by glyph size, so a 16 px glyph on a 2560 px-wide retina canvas is a few hundred columns and a few hundred draw calls per frame. That is cheap. What is not cheap is running it at full size on a phone forever: it will keep a core busy and drain battery. If you ship it as a site background, pause the loop when the tab is hidden (document.visibilitychange) and consider raising the glyph size on small screens, which reduces the column count proportionally.
Also respect prefers-reduced-motion. Continuously moving full-screen backgrounds are a genuine accessibility problem for some visitors, and a static PNG export of the same effect makes a perfectly good fallback for that media query.
| Use | Suggested settings | Export |
|---|---|---|
| Website hero background | Glyph size 20–24, speed ~0.4, trail 0.06 | Download .html, lift the JS |
| Video overlay / transition | Trail 0.03, speed 1.2, hue to match your grade | Record .webm, screen blend |
| Terminal or kiosk screensaver | Source code set, glyph size 14, speed 0.3 | Download .html, open fullscreen |
| Slide or poster still | Trail 0.02 so more glyphs are visible at once | Save PNG |
| Stream overlay | Rain upward on, hue to brand colour | Record .webm |
For a still image specifically, drop Trail length as low as it goes before pressing Save PNG. A long trail means more of the canvas has glyphs on it at any instant, which is what you want in a frozen frame — the default 0.08 is tuned for motion and looks sparse when stopped.
MediaRecorder and canvas.captureStream. If the browser lacks either, the tool reports it in the console panel rather than failing silently.rgba(3, 8, 5, ...) literal in the frame loop — change the first three numbers, keep the fourth bound to the trail parameter.This page opens the editor directly on the rain effect. The same editor carries a wider set of canvas, WebGL, three.js and CSS animations if you want to browse them — see the JavaScript Animation Playground.
The generated effect is roughly forty lines of canvas code with no dependencies, which makes it practical as a real website background rather than just a demo. A few things matter if you ship it.
Put the canvas in a fixed-position container behind your content and take it out of the accessibility tree:
<canvas id="matrix" aria-hidden="true"></canvas>
#matrix { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
pointer-events: none matters — without it the canvas will swallow clicks meant for your page.
Full-screen continuous motion is a real accessibility problem for people with vestibular disorders. Check the preference and do not start the loop if the visitor has asked for less motion:
if (matchMedia("(prefers-reduced-motion: reduce)").matches) return;
Browsers throttle requestAnimationFrame in background tabs, but the loop still costs something and can keep a laptop awake. Pause explicitly:
document.addEventListener("visibilitychange", () => {
if (document.hidden) cancelAnimationFrame(handle);
else handle = requestAnimationFrame(frame);
});
The whole canvas is repainted every frame — one translucent rectangle plus two fillText calls per column. At a 16px glyph size on a 1920px display that is around 120 columns, or 240 text draws a frame, which is comfortable. Cost scales with the number of columns, so a smaller glyph size is more expensive, not less. Cap the device pixel ratio at 2: a 3x buffer costs nine times the fill rate of 1x for no visible gain on glyphs this size.
Most reimplementations of this effect look subtly wrong, and it is almost always one of these four things.
Using clearRect gives you a single row of jittering glyphs with no tail. The effect depends on never clearing: a translucent rectangle is painted over the whole canvas each frame, so previous glyphs decay instead of vanishing. The fade alpha is the trail length.
If every column advances at the same rate, the eye reads a descending grid rather than rain. Two independent sources of desynchronisation fix it: a per-column speed multiplier, and a reset that only fires with a small random probability once a column passes the bottom. The second is what keeps columns permanently out of phase rather than merely starting out that way.
In the film the leading character is near-white and the tail is saturated green. Drawing every glyph the same colour loses the sense of a droplet with a direction of travel. Here the head is drawn at high lightness and a second, dimmer glyph is drawn just behind it.
Each cell should re-randomise its character as it falls, rather than carrying one letter down the screen. The original effect flickers because the glyph at a given position keeps changing while the column advances through it.
The film used mirrored half-width katakana mixed with Latin digits and a handful of symbols — the designer reportedly scanned them from a Japanese cookbook. Because the glyphs are mirrored, no real font reproduces the originals exactly; katakana plus digits is the closest you get without a custom typeface.
The canvas is never cleared. Each frame paints a nearly-transparent black rectangle over the entire canvas, so every previously drawn glyph gets slightly darker until it disappears. That is the whole trail effect - there is no stored history of past positions. The Trail length control is that transparency value: lower means the fade takes longer and tails get longer.
Use Record to capture a WebM video and set it as an animated wallpaper, or use Download .html to get a self-contained file you can open fullscreen in a browser. The HTML file has no dependencies and works offline straight from disk.
Mirrored half-width katakana mixed with Latin digits and a few symbols - the designer reportedly scanned them from a Japanese cookbook. This generator defaults to katakana plus digits, and also offers binary, hexadecimal and source-code punctuation.
Yes. Download .html gives you the complete implementation - roughly 40 lines. Drop the canvas into your page, position it absolutely behind your content with a negative z-index, and let it run. Keep the glyph size reasonably large and consider pausing it when the tab is hidden, since it repaints the whole canvas every frame.
Each column gets its own speed multiplier, and a column that reaches the bottom only resets with a small random chance per frame. Without both of those the columns march in lockstep and the effect reads as a descending grid rather than rain.
Edit and run 20 canvas, WebGL, three.js and CSS animations live in your browser.
Explore the Mandelbrot set in your browser - zoom, pan, tune iterations, switch to Julia sets, and save a PNG.
Draw spirograph and harmonograph figures in your browser. Adjust the frequency ratio, radii and damping, then save a PNG.