25 CSS Spinners 24 / 25

Matrix Rain Column Spinner

Five columns of katakana characters and binary digits cascade downward with a bright white leading character fading to dark green, evoking the iconic Matrix digital rain effect.

Pure CSS MIT licensed
Live Demo Open in tab

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

Open in playground

The code

<div class="sp-24">
  <div class="sp-24__cols">
    <div class="sp-24__col">
      <div class="sp-24__char" style="--i:0">ア</div>
      <div class="sp-24__char" style="--i:1">ク</div>
      <div class="sp-24__char" style="--i:2">セ</div>
      <div class="sp-24__char" style="--i:3">ス</div>
      <div class="sp-24__char" style="--i:4">1</div>
      <div class="sp-24__char" style="--i:5">0</div>
      <div class="sp-24__char" style="--i:6">0</div>
      <div class="sp-24__char" style="--i:7">1</div>
    </div>
    <div class="sp-24__col">
      <div class="sp-24__char" style="--i:0">テ</div>
      <div class="sp-24__char" style="--i:1">ス</div>
      <div class="sp-24__char" style="--i:2">ト</div>
      <div class="sp-24__char" style="--i:3">0</div>
      <div class="sp-24__char" style="--i:4">1</div>
      <div class="sp-24__char" style="--i:5">ネ</div>
      <div class="sp-24__char" style="--i:6">ッ</div>
      <div class="sp-24__char" style="--i:7">ト</div>
    </div>
    <div class="sp-24__col">
      <div class="sp-24__char" style="--i:0">1</div>
      <div class="sp-24__char" style="--i:1">0</div>
      <div class="sp-24__char" style="--i:2">ラ</div>
      <div class="sp-24__char" style="--i:3">イ</div>
      <div class="sp-24__char" style="--i:4">ン</div>
      <div class="sp-24__char" style="--i:5">コ</div>
      <div class="sp-24__char" style="--i:6">ー</div>
      <div class="sp-24__char" style="--i:7">ド</div>
    </div>
    <div class="sp-24__col">
      <div class="sp-24__char" style="--i:0">0</div>
      <div class="sp-24__char" style="--i:1">1</div>
      <div class="sp-24__char" style="--i:2">マ</div>
      <div class="sp-24__char" style="--i:3">ト</div>
      <div class="sp-24__char" style="--i:4">リ</div>
      <div class="sp-24__char" style="--i:5">ク</div>
      <div class="sp-24__char" style="--i:6">ス</div>
      <div class="sp-24__char" style="--i:7">1</div>
    </div>
    <div class="sp-24__col">
      <div class="sp-24__char" style="--i:0">ヲ</div>
      <div class="sp-24__char" style="--i:1">1</div>
      <div class="sp-24__char" style="--i:2">0</div>
      <div class="sp-24__char" style="--i:3">ル</div>
      <div class="sp-24__char" style="--i:4">ー</div>
      <div class="sp-24__char" style="--i:5">プ</div>
      <div class="sp-24__char" style="--i:6">0</div>
      <div class="sp-24__char" style="--i:7">1</div>
    </div>
  </div>
</div>
.sp-24,.sp-24 *,.sp-24 *::before,.sp-24 *::after{box-sizing:border-box;margin:0;padding:0}
.sp-24{
  --bg:#000;
  --c:#00ff41;
  --dim:#003b10;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--bg);
  font-family:'Courier New',monospace;
}
.sp-24__cols{
  display:flex;
  gap:6px;
  align-items:flex-start;
}
.sp-24__col{
  display:flex;
  flex-direction:column;
  gap:0;
}
.sp-24__char{
  width:16px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:bold;
  color:var(--dim);
  animation:sp-24-fall 1.5s linear infinite;
}
.sp-24__col:nth-child(1) .sp-24__char{animation-delay:calc(var(--i,0) * -0.1s)}
.sp-24__col:nth-child(2) .sp-24__char{animation-delay:calc(var(--i,0) * -0.1s - 0.3s)}
.sp-24__col:nth-child(3) .sp-24__char{animation-delay:calc(var(--i,0) * -0.1s - 0.6s)}
.sp-24__col:nth-child(4) .sp-24__char{animation-delay:calc(var(--i,0) * -0.1s - 0.9s)}
.sp-24__col:nth-child(5) .sp-24__char{animation-delay:calc(var(--i,0) * -0.1s - 1.2s)}
/* Head char bright white-green */
.sp-24__col:nth-child(1) .sp-24__char:nth-child(1),
.sp-24__col:nth-child(2) .sp-24__char:nth-child(1),
.sp-24__col:nth-child(3) .sp-24__char:nth-child(1),
.sp-24__col:nth-child(4) .sp-24__char:nth-child(1),
.sp-24__col:nth-child(5) .sp-24__char:nth-child(1){
  color:#fff;
  text-shadow:0 0 8px var(--c),0 0 16px var(--c);
}
@keyframes sp-24-fall{
  0%{color:#fff;text-shadow:0 0 8px var(--c)}
  10%{color:var(--c);text-shadow:0 0 4px var(--c)}
  60%{color:rgba(0,255,65,0.4);text-shadow:none}
  100%{color:var(--dim);text-shadow:none}
}
@media (prefers-reduced-motion: reduce){
  .sp-24__char{animation:none;color:var(--c)}
}

How this works

Each character cell runs sp-24-fall: starting white with a glow (text-shadow:0 0 8px var(--c)), transitioning through bright green, fading to mid-green, then settling at a near-invisible dark green — simulating a phosphor afterglow trail behind the bright "head" character. The fastest-fading cells have a shorter animation-duration override, adding visual variety.

Five flex columns each start their column's delay at a different offset (-0.3s, -0.6s, etc.) so columns are out of phase. Within each column, per-cell --i custom properties multiply to create a top-to-bottom stagger. The first cell in every column gets an override to always be white and glowing, acting as the visible "rain drop head".

Customize

  • Change character content by replacing katakana characters in the HTML with Latin letters, numbers, or custom symbols — a hex-digit set (0–9, A–F) creates a memory-dump aesthetic.
  • Adjust column width and character size via font-size (12px default) and cell width (16px) — larger characters at fewer columns suit mobile displays.
  • Change rain speed by reducing animation-duration from 1.5s to 0.8s for a faster cascade.
  • Add a green background colour to the parent and use mix-blend-mode:screen on the columns to render the rain over other content.
  • Increase column count to 8–10 and reduce individual column animation duration variations for a denser rain effect.

Watch out for

  • Using the CSS custom property --i in animation-delay:calc(var(--i) * -0.1s) requires Chrome 66+, Firefox 61+, Safari 15.4+ — on older Safari, write out each delay explicitly.
  • The !important overrides on the first-child brightness are necessary because inline style attribute --i custom property selectors have equal specificity to class rules — test override chain in DevTools.
  • Each column's fade relies on a specific cell count — if you change from 8 cells to more, add corresponding nth-child delay rules or the extra cells will all share the same delay.

Browser support

ChromeSafariFirefoxEdge
66+ 15.4+ 61+ 66+

CSS custom properties in animation-delay calc() require Safari 15.4+; write delays explicitly for older browsers.

More from 25 CSS Spinners

Cyberpunk Segmented Ring SpinnerBreathing Circle LoaderParticle Scatter Burst SpinnerRetro TV Static Noise LoaderLiquid Blob CSS SpinnerProgress Arc Fill SpinnerAurora Gradient Orb SpinnerNeon Arc CSS SpinnerDual Counter-Rotate Ring SpinnerDot Chase Orbit SpinnerGradient Conic Sweep SpinnerHeartbeat Pulse Loader
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →