25 CSS Spinners24 / 25

Pure CSSMIT licensed

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.

Published

Live Demo
Try it

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

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);
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Spinner from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Matrix Rain Column Spinner
Source: https://codefronts.com/motion/css-spinner-designs/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.
## HTML
```html
<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>
```
## CSS
```css
.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".

Make it yours

  • 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.

Gotchas — read before shipping

  • 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.

Techniques used in this demo

@keyframesMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →