Tuyết rơi

<div id="snow" aria-hidden="true"></div>

html, body { height: 100%; margin: 0; }
body { background: linear-gradient(#0f1b3d, #2b4a7c); overflow: hidden; }
#snow { position: fixed; inset: 0; pointer-events: none; }
.flake {
  position: absolute;
  top: -10px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.85;
  animation: fall linear infinite;
}
@keyframes fall {
  to { transform: translate3d(var(--drift), 110vh, 0); }
}

(function () {
  var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
  var box = document.getElementById('snow');

  function snow() {
    box.innerHTML = '';
    if (reduceMotion.matches) return;

    for (var i = 0; i < 80; i++) {
      var flake = document.createElement('span');
      var size = 2 + Math.random() * 4;
      flake.className = 'flake';
      flake.style.left = Math.random() * 100 + '%';
      flake.style.width = flake.style.height = size + 'px';
      flake.style.animationDuration = 6 + Math.random() * 8 + 's';
      flake.style.animationDelay = -Math.random() * 14 + 's';
      flake.style.setProperty('--drift', (Math.random() * 80 - 40) + 'px');
      box.appendChild(flake);
    }
  }

  snow();
  reduceMotion.addEventListener('change', snow);
})();