structure into your :

-------------------------------------------------------------------------------- .snow-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; pointer-events: none; overflow: hidden; } .snow { position: absolute; top: -100px; left: 0; right: 0; bottom: 0; background-image: radial-gradient(4px 4px at 100px 50px, #fff, transparent), radial-gradient(6px 6px at 200px 150px, #fff, transparent), radial-gradient(3px 3px at 300px 250px, #fff, transparent), radial-gradient(4px 4px at 400px 350px, #fff, transparent), radial-gradient(6px 6px at 500px 100px, #fff, transparent), radial-gradient(3px 3px at 600px 200px, #fff, transparent), radial-gradient(4px 4px at 700px 300px, #fff, transparent), radial-gradient(6px 6px at 800px 400px, #fff, transparent), radial-gradient(3px 3px at 900px 50px, #fff, transparent); background-size: 1000px 1000px; animation: snow-fall linear infinite; } .snow-1 { animation-duration: 10s; opacity: 0.8; } .snow-2 { animation-duration: 15s; background-size: 800px 800px; animation-delay: -5s; opacity: 0.5; } .snow-3 { animation-duration: 20s; background-size: 600px 600px; animation-delay: -10s; opacity: 0.3; } @keyframes snow-fall { 0% { transform: translateY(0) translateX(0); } 25% { transform: translateY(25vh) translateX(15px); } 50% { transform: translateY(50vh) translateX(-15px); } 75% { transform: translateY(75vh) translateX(15px); } 100% { transform: translateY(100vh) translateX(0); } } ================================================================================ END OF SNOWFALL EFFECT ================================================================================ */