@property --y {
  syntax: "<percentage>";
  inherits: false;
  initial-value: -1%;
}
.snowfall,
.snowfall::before,
.snowfall::after {
  position: absolute;
  inset: 0;
  content: "";
  overflow: hidden;
  pointer-events: none;
  background-image: radial-gradient(
      circle at 5% calc(var(--y) * 1),
      #fff 3px,
      transparent 6px
    ),
    radial-gradient(
      circle at 65% calc(var(--y) * 1.3),
      #fff 2px,
      transparent 4px
    );
}
.snowfall {
  animation: snowfall 20s linear infinite;
  background-size: 65% 100%;
}
.snowfall::before {
  inset: -4rem 0 0;
  opacity: 0.7;
  animation: snowfall 27s linear infinite, wind 27s ease-in-out infinite;
  background-size: 45% 100%;
}
.snowfall::after {
  inset: -8rem 0 0;
  opacity: 0.8;
  animation: snowfall 37s linear infinite, wind 47s ease-in-out infinite;
  background-size: 32% 100%;
}
@keyframes snowfall {
  0% {
    --y: -1%;
  }
  100% {
    --y: 101%;
  }
}
@keyframes wind {
  50% {
    translate: 200px;
  }
}