html {
  height: 100%;
  background: linear-gradient(#123 30%, #667);
}

.snow, .snow:before, .snow:after {
  position: absolute;
  top: -600px;
  height: 100%;  /* changed from bottom: 0 */
  left: 0;
  right: 0;
  background-image: 
  radial-gradient(3px 3px at 126px 270px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), 
  radial-gradient(5px 5px at 122px 483px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), 
  radial-gradient(3px 3px at 370px 308px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), 
  radial-gradient(6px 6px at 347px 327px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), 
  radial-gradient(6px 6px at 400px 114px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), 
  radial-gradient(6px 6px at 463px 398px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), 
  radial-gradient(6px 6px at 203px 491px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), 
  radial-gradient(6px 6px at 142px 212px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), 
  radial-gradient(3px 3px at 100px 205px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), 
  radial-gradient(6px 6px at 226px 384px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), 
  radial-gradient(5px 5px at 379px 561px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), 
  radial-gradient(4px 4px at 101px 536px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), 
  radial-gradient(4px 4px at 290px 308px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), 
  radial-gradient(5px 5px at 169px 116px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), 
  radial-gradient(3px 3px at 107px 113px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), 
  radial-gradient(4px 4px at 50px 392px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), 
  radial-gradient(5px 5px at 465px 164px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), 
  radial-gradient(6px 6px at 154px 219px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), 
  radial-gradient(5px 5px at 321px 356px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), 
  radial-gradient(5px 5px at 446px 429px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), 
  radial-gradient(6px 6px at 565px 538px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), 
  radial-gradient(5px 5px at 276px 547px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), 
  radial-gradient(5px 5px at 516px 455px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), 
  radial-gradient(3px 3px at 88px 350px, white 50%, rgba(0, 0, 0, 0)), 
  radial-gradient(3px 3px at 351px 5px, white 50%, rgba(0, 0, 0, 0)), 
  radial-gradient(3px 3px at 416px 70px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0));
  background-size: 600px 600px;
  animation: snow 5s linear infinite;
  content: "";
}

.snow:after {
  margin-left: -200px;
  opacity: 0.4;
  animation-duration: 6s;
  animation-direction: reverse;
  filter: blur(3px);
}

.snow:before {
  animation-duration: 0s;
  animation-direction: reverse;
  margin-left: -300px;
  opacity: 0.65;
  filter: blur(1.5px);
}

@keyframes snow {
  to {
    transform: translateY(600px);
  }
}