<div class="container">
  <i class="wi wi-snowflake-cold flake"></i>
<a href="https://reactgo.com/css-snow-animation/" target="_blank" class="master">View Tutorial</a>
</div>

body {
  font-family: sans-serif;
  background: #070606e8;
  background-image: url(http://photoshopdesire.com/wp-content/uploads/2016/02/day2night-after-photoshop.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.container {
  height: 100vh;
  overflow: hidden;
}

.flake {
  color: rgb(247, 252, 243);
  font-size: 2rem;
  padding: 1rem;
  animation: fall 2s linear forwards infinite;
  animation-delay: 1s;
}

@keyframes fall {
  from {
    transform: translateY(-10vh);
  }
  to {
    transform: translateY(100vh);
  }
}


.master{
  color:white;
  float:right;
}

@media only screen and (max-width: 800px) {
  .flake {
    font-size: 1rem;
    animation-delay: 0s;
  }
  
  .master{
    display:none;
  }
}

const flake = document.querySelector(".flake");
const container = document.querySelector(".container");

function createFlake() {
  const clone = flake.cloneNode(true);
  clone.style.paddingLeft = Math.random() * 10 + "px"; // creating left padding
  clone.style.animationDuration = Math.random() * 5 + 3 + "s"; // animation duration between 3-5
  clone.style.opacity = Math.random() * 1;
  container.append(clone); // adding clone flake to container
}
const s = setInterval(createFlake, 100); // to create more flakes decrease 100

setTimeout(() => {
  clearInterval(s);
}, 3000); // flake creation stops after 3000 milliseconds or 3s

// to add random colors add this code to createFlake method

/* 
 const randomC = Math.random() * 200;
 const randomA = Math.random() * 200;
 const randomB = Math.random() * 56;
 clone.style.color = `rgb(${randomA + 256},${randomB + 200},${randomC + 100})`;

*/