Matrix Rain

Fill & Texture · Animated · pure CSS

Columns of glowing green code-rain fall through the glyphs at different speeds over a dark green-black base, with brighter, faster head streaks leading the pack and a phosphor-green glow. An honest pure-CSS approximation of the Matrix effect — clipped, vertically-scrolling gradient streaks rather than real characters — that reads on both dark and light backgrounds.

Open in the generator →All effects
Matrix Rain

How it works

Matrix Rain is an animated fill & texture text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.

Controls

Matrix Rain exposes 3 dedicated controls — Hue, Rain and Density — on top of the shared type controls (font, weight, letter-spacing and case). Open it in the generator to tune every value live, then copy the updated CSS.

CSS

/* Matrix Rain — made with TEXT-FX · https://text-fx.app
 * HTML: just put the class on any element.
 * Font: 'Archivo Black', sans-serif (load from Google Fonts).
 */

.text-effect {
  font-family: 'Archivo Black', sans-serif;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: none;
}

.text-effect {
  background: linear-gradient(to bottom, transparent 0%, transparent 55%, hsl(135 95% 66%) 80%, hsl(135 82% 92%) 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, transparent 55%, hsl(135 95% 66%) 80%, hsl(135 82% 92%) 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, transparent 55%, hsl(135 95% 66%) 80%, hsl(135 82% 92%) 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, hsl(135 85% 34%) 30%, hsl(135 90% 50%) 62%, hsl(135 95% 66%) 84%, hsl(135 82% 92%) 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, hsl(135 85% 34%) 30%, hsl(135 90% 50%) 62%, hsl(135 95% 66%) 84%, hsl(135 82% 92%) 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, hsl(135 85% 34%) 30%, hsl(135 90% 50%) 62%, hsl(135 95% 66%) 84%, hsl(135 82% 92%) 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, hsl(135 85% 34%) 30%, hsl(135 90% 50%) 62%, hsl(135 95% 66%) 84%, hsl(135 82% 92%) 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, hsl(135 85% 34%) 30%, hsl(135 90% 50%) 62%, hsl(135 95% 66%) 84%, hsl(135 82% 92%) 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, hsl(135 85% 34%) 30%, hsl(135 90% 50%) 62%, hsl(135 95% 66%) 84%, hsl(135 82% 92%) 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, hsl(135 85% 34%) 30%, hsl(135 90% 50%) 62%, hsl(135 95% 66%) 84%, hsl(135 82% 92%) 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, hsl(135 85% 34%) 30%, hsl(135 90% 50%) 62%, hsl(135 95% 66%) 84%, hsl(135 82% 92%) 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, hsl(135 85% 34%) 30%, hsl(135 90% 50%) 62%, hsl(135 95% 66%) 84%, hsl(135 82% 92%) 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, hsl(135 85% 34%) 30%, hsl(135 90% 50%) 62%, hsl(135 95% 66%) 84%, hsl(135 82% 92%) 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, hsl(135 85% 34%) 30%, hsl(135 90% 50%) 62%, hsl(135 95% 66%) 84%, hsl(135 82% 92%) 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, hsl(135 85% 34%) 30%, hsl(135 90% 50%) 62%, hsl(135 95% 66%) 84%, hsl(135 82% 92%) 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, hsl(135 85% 34%) 30%, hsl(135 90% 50%) 62%, hsl(135 95% 66%) 84%, hsl(135 82% 92%) 95%, transparent 100%),
    linear-gradient(180deg, hsl(135 65% 10%), hsl(135 70% 16%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-size: 4px 23.4px, 4px 23.4px, 4px 23.4px, 3px 36px, 4px 50.4px, 5px 64.8px, 3px 43.2px, 4px 57.6px, 5px 36px, 3px 50.4px, 4px 64.8px, 5px 43.2px, 3px 57.6px, 4px 36px, 5px 50.4px, 3px 64.8px, 100% 100%;
  background-repeat: repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, no-repeat;
  background-position: 18% 0, 50% 0, 82% 0, 2% 0, 10% 0, 18% 0, 26% 0, 34% 0, 42% 0, 50% 0, 58% 0, 66% 0, 74% 0, 82% 0, 90% 0, 98% 0, 50% 0;
  filter: drop-shadow(0 0 4px hsl(135 90% 55% / 0.55)) drop-shadow(0 0 9px hsl(135 90% 55% / 0.55));
  animation: text-effect-rain 3.0s linear infinite;
}

@keyframes text-effect-rain {
  to { background-position: 18% 117px, 50% 117px, 82% 117px, 2% 72px, 10% 201.6px, 18% 194.39999999999998px, 26% 86.4px, 34% 230.4px, 42% 108px, 50% 100.8px, 58% 259.2px, 66% 129.60000000000002px, 74% 115.2px, 82% 144px, 90% 151.2px, 98% 129.6px, 50% 0px; }
}

Pure CSS — just add the .text-effect class to any element.

Category
Fill & Texture
Type
Animated
Browser support
background-clip:text + vertically-scrolling repeating-linear-gradient columns
Capabilities
pure

Related Fill & Texture effects