How to Add Awesome Snowfall Effect to Your Website

Are you looking to decorate your website with snowfall effect this winter? Well, here is a small tutorial on how to add snowfall effect to your website and chill it up.  In this tutor, we are going to use Snow Flurry jquery plugin developed by html5andblog to add the snowfall effect. Well, let’s get started-

Also read:

Steps to Add Snowfall Effect to your Website

  1. Include the snow flurry and jquery script along with jQuery in the document header
    <script src=""></script>
    <script src=""></script>
  2. Add the following jQuery code in the footer of your HTML document right before the closing body tag
    maxSize: 5,
    numberOfFlakes: 50,
    minSpeed: 10,
    maxSpeed: 15,
    color: '#fff',
    timeout: 0
  3. Add the following CSS just before the closing head tag (or you can also add this CSS in your stylesheet without using the style tag)
    .sf-snow-flake {
    position: fixed;
    top: -20px;
    z-index: 99999;
    .sf-snow-anim {
    top: 110%;

That’s it, save your HTML document and check out how awesome the snowfall effect looks. You can add more snowflakes by changing numberOfFlakes value in the jquery code, you can also control the speed of snowfall by modifying minSpeed and maxSpeed values. Click on the button below to download the snowfall HTML file with complete code.

How to Add Snowfall Effect to WordPress Website?

Would you like to add snowfall effect to your WordPress website? Well, there is a tiny plugin available called Snow Flurry developed by HTML5andBeyond. Here is the link for Snow Flurry plugin.


Article by Shrinivas Naik

Hi, This is Shrinivas I am a web developer and WordPress enthusiast. I am also a hobby blogger who loves to write about WordPress, web tools, blogging and technology.

Leave a Reply

Let's Get Connected!

Did you like our blog? Please like us on Facebook and follow us on Twitter to get updates.

How to Add Awesome Snowfall Effect to Your Website

by Shrinivas time to read: 1 min