Matrix Rain Background

<div class="bgx-matrix-rain" aria-hidden="true"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>

.bgx-matrix-rain {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --code: color-mix(in oklab, var(--c) 45%, #22ff7a);
  background: radial-gradient(ellipse 80% 70% at 50% 40%, color-mix(in srgb, var(--code) 10%, #030807), #010302);}
.bgx-matrix-rain span {
  position: absolute;
  top: 0;
  left: var(--x);
  width: 0.9em;
  height: 100%;
  overflow: hidden;
  background: color-mix(in srgb, var(--code) 9%, transparent);
  mask-image:
    radial-gradient(0.15em 0.06em at 0.27em 0.35em, #000 70%, transparent),
    radial-gradient(0.06em 0.3em at 0.18em 0.5em, #000 70%, transparent),
    radial-gradient(0.06em 0.3em at 0.18em 1.5em, #000 70%, transparent),
    radial-gradient(0.28em 0.06em at 0.41em 1.5em, #000 70%, transparent),
    radial-gradient(0.09em 0.09em at 0.41em 1.5em, #000 70%, transparent),
    radial-gradient(0.28em 0.06em at 0.41em 2.8em, #000 70%, transparent),
    radial-gradient(0.28em 0.06em at 0.41em 2.5em, #000 70%, transparent),
    radial-gradient(0.06em 0.3em at 0.41em 3.5em, #000 70%, transparent),
    radial-gradient(0.06em 0.3em at 0.18em 3.5em, #000 70%, transparent),
    radial-gradient(0.28em 0.06em at 0.41em 3.8em, #000 70%, transparent),
    radial-gradient(0.15em 0.06em at 0.27em 4.35em, #000 70%, transparent),
    radial-gradient(0.06em 0.3em at 0.41em 4.5em, #000 70%, transparent),
    radial-gradient(0.09em 0.09em at 0.41em 5.5em, #000 70%, transparent),
    radial-gradient(0.28em 0.06em at 0.41em 5.2em, #000 70%, transparent),
    radial-gradient(0.28em 0.06em at 0.41em 5.8em, #000 70%, transparent),
    radial-gradient(0.06em 0.3em at 0.63em 6.5em, #000 70%, transparent),
    radial-gradient(0.28em 0.06em at 0.41em 6.5em, #000 70%, transparent),
    radial-gradient(0.09em 0.09em at 0.41em 7.5em, #000 70%, transparent),
    radial-gradient(0.15em 0.06em at 0.27em 7.35em, #000 70%, transparent),
    radial-gradient(0.28em 0.06em at 0.41em 8.2em, #000 70%, transparent),
    radial-gradient(0.15em 0.06em at 0.54em 8.65em, #000 70%, transparent),
    radial-gradient(0.06em 0.3em at 0.18em 8.5em, #000 70%, transparent),
    radial-gradient(0.28em 0.06em at 0.41em 9.8em, #000 70%, transparent),
    radial-gradient(0.06em 0.3em at 0.63em 9.5em, #000 70%, transparent);
  mask-size: 0.9em 10em;
  mask-position: 0 var(--off);
}
.bgx-matrix-rain span::before {
  content: "";
  position: absolute;
  top: calc(var(--len) * -1);
  left: 0;
  width: 100%;
  height: calc(100% + var(--len));
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--code) 70%, transparent) 40%, var(--code) 90%, #effff4 0) top / 100% var(--len) no-repeat;
  animation: bgx-matrix-rain-fall var(--dur) linear var(--delay) infinite;
}
.bgx-matrix-rain span:nth-child(1) { --x: 45%; --off: 4em; --len: 7.54em; --dur: 4.61s; --delay: -1.89s; }
.bgx-matrix-rain span:nth-child(2) { --x: 35.5%; --off: 5em; --len: 6.06em; --dur: 2.35s; --delay: -2.54s; }
.bgx-matrix-rain span:nth-child(3) { --x: 94.2%; --off: 4em; --len: 6.71em; --dur: 4.57s; --delay: -0.62s; }
.bgx-matrix-rain span:nth-child(4) { --x: 25.2%; --off: 9em; --len: 7.66em; --dur: 3.58s; --delay: -4.02s; }
.bgx-matrix-rain span:nth-child(5) { --x: 49.3%; --off: 1em; --len: 5.96em; --dur: 3.61s; --delay: -3.42s; }
.bgx-matrix-rain span:nth-child(6) { --x: 90.6%; --off: 3em; --len: 7.81em; --dur: 2.34s; --delay: -3.54s; }
.bgx-matrix-rain span:nth-child(7) { --x: 41.2%; --off: 3em; --len: 6.08em; --dur: 4.4s; --delay: -0.56s; }
.bgx-matrix-rain span:nth-child(8) { --x: 83.5%; --off: 5em; --len: 7.07em; --dur: 3.07s; --delay: -4.44s; }
.bgx-matrix-rain span:nth-child(9) { --x: 27.8%; --off: 0em; --len: 5.99em; --dur: 4.36s; --delay: -0.92s; }
.bgx-matrix-rain span:nth-child(10) { --x: 71.6%; --off: 5em; --len: 8.92em; --dur: 4.59s; --delay: -2.16s; }
.bgx-matrix-rain span:nth-child(11) { --x: 66.5%; --off: 2em; --len: 9.69em; --dur: 3.33s; --delay: -2.29s; }
.bgx-matrix-rain span:nth-child(12) { --x: 60.6%; --off: 2em; --len: 9.88em; --dur: 3.27s; --delay: -1.51s; }
.bgx-matrix-rain span:nth-child(13) { --x: 56.3%; --off: 5em; --len: 5.15em; --dur: 4.47s; --delay: -0.19s; }
.bgx-matrix-rain span:nth-child(14) { --x: 32.2%; --off: 3em; --len: 10.51em; --dur: 3.74s; --delay: -3.65s; }
.bgx-matrix-rain span:nth-child(15) { --x: 77.8%; --off: 0em; --len: 5.5em; --dur: 4.15s; --delay: -3.93s; }
.bgx-matrix-rain span:nth-child(16) { --x: 20.3%; --off: 0em; --len: 11.44em; --dur: 3.63s; --delay: -4.08s; }
.bgx-matrix-rain span:nth-child(17) { --x: 51.1%; --off: 9em; --len: 9.91em; --dur: 3.57s; --delay: -0.73s; }
.bgx-matrix-rain span:nth-child(18) { --x: 17.6%; --off: 3em; --len: 6.53em; --dur: 3.61s; --delay: -2.95s; }
.bgx-matrix-rain span:nth-child(19) { --x: 12.6%; --off: 2em; --len: 9em; --dur: 3.57s; --delay: -1.95s; }
.bgx-matrix-rain span:nth-child(20) { --x: 85.7%; --off: 9em; --len: 9.89em; --dur: 3.58s; --delay: -1.31s; }
.bgx-matrix-rain span:nth-child(21) { --x: 97.8%; --off: 5em; --len: 11.29em; --dur: 2.59s; --delay: -4.93s; }
.bgx-matrix-rain span:nth-child(22) { --x: 10.1%; --off: 9em; --len: 5.2em; --dur: 4.16s; --delay: -4.47s; }
.bgx-matrix-rain span:nth-child(23) { --x: 74.6%; --off: 4em; --len: 7.63em; --dur: 4.32s; --delay: -0.1s; }
.bgx-matrix-rain span:nth-child(24) { --x: 5.8%; --off: 6em; --len: 9.07em; --dur: 3.55s; --delay: -0.55s; }
.bgx-matrix-rain span:nth-child(25) { --x: 62.8%; --off: 0em; --len: 9.35em; --dur: 4.14s; --delay: -4.12s; }
.bgx-matrix-rain span:nth-child(26) { --x: 0.9%; --off: 9em; --len: 7.56em; --dur: 3.61s; --delay: -1.93s; }
@keyframes bgx-matrix-rain-fall {
  to { transform: translateY(100%); }
}

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

Similar animated backgrounds