Snowfall CSS background

Here's a basic snowfall animation, simply save this as a .css and upload it in the css section of your theme. (Our flakes are green, feel free to change the colour)

body {
  position: relative;
  overflow: hidden;
  background-color: transparent;
}

body::before, body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: 
    radial-gradient(circle, #00ff00 1px, transparent 2px),
    radial-gradient(circle, #00ff00 1.5px, transparent 3px),
    radial-gradient(circle, #00ff00 2px, transparent 4px);
  background-size: 
    200px 200px, 
    300px 300px, 
    400px 400px;
  background-position: 
    10% -100vh, 40% -120vh, 70% -90vh;
  animation: snowfall 30s linear infinite, wind 8s ease-in-out infinite, snowfallFade 30s linear infinite;
}

body::after {
  z-index: -2;
  background-size: 
    250px 250px, 
    350px 350px, 
    500px 500px;
  background-position: 
    20% -110vh, 50% -130vh, 80% -95vh;
  animation: snowfall 40s linear infinite, wind 12s ease-in-out infinite, snowfallFade 40s linear infinite;
}

@keyframes snowfall {
  0% {
    background-position: 
      10% -100vh, 40% -120vh, 70% -90vh;
  }
  100% {
    background-position: 
      10% 110vh, 40% 130vh, 70% 90vh;
  }
}

@keyframes wind {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(20px);
  }
}


@keyframes snowfallFade {
  0% { opacity: 0; }
  10% { opacity: 1; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

The result (it does not actually loop like this, the gif just cuts off, there is a smooth fade in/out transition):

🔥🔥🔥🔥🔥