Share on facebook
Share on reddit
Share on twitter
Share on pinterest
Share on tumblr
Share on whatsapp

How to create a snowfall with Javascript

Share on facebook
Share on twitter
Share on linkedin
Share on tumblr
Share on whatsapp
Share on pinterest

Hello people! It’s Christmas time! So let’s create a snowfall effect with JavaScript. It’s only pure JavaScript. No jQuery or other libraries. Just plain JavaScript. So let’s create snowfall with Javascript.

Step 1

Open your favourite code editor.

And now create an HTML file with the following code:

<!DOCTYPE html>
<html lang="en">
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>My Snowfall</title>
            // our hero code

And we’ll make the background darker.

    body {
        background: #1d1d1d;

Now let’s start with JavaScript.

Step 2

Let’s create a function named addSnow.

let addSnow = () => {
    // code goes here

Then inside the function, we put these variables:

const random = (min, max) => Math.random() * (max - min) + min;
let screenWidth = window.innerWidth;
let screenHeight = window.innerHeight;

Now we’ll create a div.

let snow = document.createElement('div');

Then we’ll add some styles to the div. = "fixed"; = "-2px"; = random(0, screenWidth) + "px"; = "10px"; = "10px"; = "#fff"; = "50%"; = "999"; = "none";

These styles will create something like this (Smaller):


After that animate the div.

const animateSnow = () => { = parseInt( + 2 + "px"; = parseInt( + random(0, 2) + "px";
     * If it's out of the screen, move it to the top
     * and randomize it's position
     * */
    if (parseInt( > screenHeight) { = random(0, screenWidth) + "px"; = parseInt("-" + random(0, 20) + "px");

And finally, we’ll add the div to the body.


Ah, don’t forget to close the function.


And to add the snow we’ll just call the function 60 times.

for (let i = 0; i < 60; i++) {
    setTimeout(addSnow, i * 100);

And that’s it! Here’s the result:



Here’s a minified version of the code:

let  t=()=>{const  t=(t,e)=>Math.random()*(e-t)+t;let  e=window.innerWidth,n=window.innerHeight,s=document.createElement("div");"fixed","-2px",,e)+"px","10px","10px","#fff","50%","999",'none';const  i=()=>{"px",,2)+"px",parseInt(>n&&(,e)+"px","-"+t(0,20)+"px")),window.requestAnimationFrame(i)};window.requestAnimationFrame(i),document.body.appendChild(s)};for(let  e=0;e<60;e++)setTimeout(t,100*e);

You can add this to your website and you’ll get a snowfall effect. Have fun! 🙂

Subscribe on YouTube


Generate Smooth Shadows

Leave a Reply

Your email address will not be published. Required fields are marked *

Request a tutorial if you didn't find what you need.