Matrix Rain Text Effect: CSS Text Animation

Matrix Rain Text Effect

Columns of falling glyphs rain down behind a word, each at its own speed, fading toward the top like a trail. Every column is vertical text moved with transform, desynced by negative delays.

Also known as: matrix text effect css, digital rain background, falling code text.

ENTER

Color Font size 40px Dark background

HTML

<div class="txt-matrix-rain-text">
  <span class="txt-matrix-rain-text-rain" aria-hidden="true"><i style="--x: 2%; --d: 2.4s; --t: -0.4s">ア7カ0サ1タ9ナ4</i><i style="--x: 10%; --d: 1.8s; --t: -1.1s">ハ3マ8ヤ2ラ6ワ0</i><i style="--x: 18%; --d: 2.9s; --t: -0.2s">キ5シ1チ7ニ3ヒ9</i><i style="--x: 26%; --d: 2.1s; --t: -1.6s">ミ0リ4ク8ス2ツ6</i><i style="--x: 34%; --d: 2.6s; --t: -0.9s">ヌ1フ5ム9ユ3ル7</i><i style="--x: 42%; --d: 1.9s; --t: -2s">ケ6セ0テ4ネ8ヘ2</i><i style="--x: 50%; --d: 2.7s; --t: -0.6s">メ3レ7コ1ソ5ト9</i><i style="--x: 58%; --d: 2.2s; --t: -1.4s">ノ2ホ6モ0ヨ4ロ8</i><i style="--x: 66%; --d: 2.5s; --t: -0.1s">ヲ9ン3ア5カ1サ7</i><i style="--x: 74%; --d: 2s; --t: -1.8s">エ4オ8イ2ウ6ア0</i><i style="--x: 82%; --d: 2.8s; --t: -0.7s">タ1チ5ツ9テ3ト7</i><i style="--x: 90%; --d: 2.3s; --t: -1.2s">ナ6ニ0ヌ4ネ8ノ2</i></span>
  <span class="txt-matrix-rain-text-word">ENTER</span>
</div>

CSS

.txt-matrix-rain-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 7em;
  height: 2.6em;
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent);
  mask-image: radial-gradient(closest-side, #000 60%, transparent);}
.txt-matrix-rain-text-rain {
  position: absolute;
  inset: 0;
  font-size: 0.4em;
  font-weight: 500;
  color: var(--c);
  opacity: 0.6;
}
.txt-matrix-rain-text-rain i {
  position: absolute;
  top: 0;
  left: var(--x);
  font-style: normal;
  line-height: 1;
  white-space: nowrap;
  writing-mode: vertical-rl;
  text-orientation: upright;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 85%);
  mask-image: linear-gradient(180deg, transparent, #000 85%);
  transform: translateY(-100%);
  animation: txt-matrix-rain-text-fall var(--d) linear var(--t) infinite;
}
.txt-matrix-rain-text-word {
  position: relative;
  font-weight: 800;
  letter-spacing: 0.2em;
  padding-left: 0.2em;
  color: var(--c);
  text-shadow: 0 0 0.25em color-mix(in srgb, var(--c) 60%, transparent);
}
/* 6.5em = the box height (2.6em) in the rain's smaller em */
@keyframes txt-matrix-rain-text-fall {
  to { transform: translateY(6.5em); }
}

@media (prefers-reduced-motion: reduce) {
  .txt-matrix-rain-text, .txt-matrix-rain-text *, .txt-matrix-rain-text::before, .txt-matrix-rain-text::after, .txt-matrix-rain-text *::before, .txt-matrix-rain-text *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

Color: set --txt-color on the element or a parent. Currently previewing #3b82f6.
Font size: set --txt-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 40px.
Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Matrix Rain Text Effect

HTML

CSS

Customizing this snippet

Similar text animations