How to Add Falling Snowflakes to Your Divi WordPress Website

by | Dec 23, 2017 | Divi Tutorials | 89 comments

If you’re in the Northern Hemisphere, it’s currently winter time. The weather is colder, and as we approach Christmas, everyone seems to be in the holiday spirit.

As we gear up for the holidays, one fun way that you can get into the spirit of the season, is to liven up your website with some falling snowflakes. It’s fun, it’s festive, and it’s really easy to do!

 

 

In this tutorial, I’m going to show you how to add falling snowflakes using PURE CSS (plus images). That means no plugins, no javascript. Just some images (that I’m giving you, or create your own), and CSS animations.

We’re going to go over several methods of implementing the CSS. From adding it site wide, to just one page, and even to just certain sections, rows, and modules too!

 

Go to Demo Site

Adding falling Snowflakes to Your Entire Website

The first thing we’ll look at, is adding the snowflakes to your entire site. This is very simple and requires just one step:

Copy the below CSS, and paste it into your Divi Theme Options custom CSS box, or your child theme’s style.css file.

body {
   position: relative;
}

body:before {
   content: '';
   display: block;
   position: absolute;
   z-index: 2;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   pointer-events: none;
   background-image: url('https://s3.amazonaws.com/divi-life-plugin-layouts/tutorials/snow/divi-life-snowflakes-b.png'), url('https://s3.amazonaws.com/divi-life-plugin-layouts/tutorials/snow/divi-life-snowflakes-c.png'), url('https://s3.amazonaws.com/divi-life-plugin-layouts/tutorials/snow/divi-life-snowflakes-a-1.png');
    animation: divi-life-snow 10s linear infinite;
}

@keyframes divi-life-snow {
 0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}

@-moz-keyframes divi-life-snow {
 0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}

@-webkit-keyframes divi-life-snow {
 0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}

@-ms-keyframes divi-life-snow {
 0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}

That’s it! You should now see the falling CSS on your entire website! Easy enough, right?

For faster loading, it’s best to download the images, and then upload them to your own site. You’ll need to update the above image URLs to match your own URLs on your site.

How to Make it Snow on Just One Page

What if you only want it to snow on a single webpage? Perhaps on a sale or promo page. You can do that easily by adding the above CSS to your custom CSS box on the individual page, within the Divi Page Settings.

 

How to Add Falling Snowflakes to Divi Sections, Rows, or Modules

Okay, so it’s simple enough to make it snow on your entire website or a single page. But what if you don’t want the whole page to snow? What if you only want to apply it to certain sections, rows, or modules? Perhaps in a slide module, or in a full width header module (like we have on this post page), or even in a website promo bar using Divi Bars! We can do just that with some minor tweaks to the CSS!

So instead of applying the snow and CSS animations to the Body, you can apply it to just a CSS class. Then, you can add the CSS class to any section, row, or module in the Divi Builder’s advanced tab’s CSS class field.

So first step is to copy the below CSS and paste it into your Divi Theme Options custom CSS box.

.divi-life-snow {
   position: relative;
}

.divi-life-snow:after {
   content: '';
   display: block;
   position: absolute;
   z-index: 2;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   pointer-events: none;
   background-image: url('https://s3.amazonaws.com/divi-life-plugin-layouts/tutorials/snow/divi-life-snowflakes-b.png'), url('https://s3.amazonaws.com/divi-life-plugin-layouts/tutorials/snow/divi-life-snowflakes-c.png'), url('https://s3.amazonaws.com/divi-life-plugin-layouts/tutorials/snow/divi-life-snowflakes-a-1.png');
    animation: divi-life-snow 10s linear infinite;
}

@keyframes divi-life-snow {
 0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}

@-moz-keyframes divi-life-snow {
 0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}

@-webkit-keyframes divi-life-snow {
 0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}

@-ms-keyframes divi-life-snow {
 0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}

Now that the CSS has been added to your site, we need to assign it to a section, row, or module. To do this, simply copy the class divi-life-snow and paste it in the CSS class field of the advanced tab, of whichever section, row, or module you’d like to make snow.

 

Make sure you add it to the CSS Class, and not the ID. Also, make sure you don’t have a period in front of it. It should look exactly like it does in the above image.

And that’s it! Easy enough right?

So How Does it Work?

As I mentioned at the beginning of this post, this is purely CSS with some images. So it’s very easy to understand. Basically, we have three separate images that make up the snowflakes. Each image has 4 different unique snowflakes. And then they are scattered around and duplicated across the image. Then, each image has all of the snowflakes in a different arrangement.

If you’d like to create your own unique snowflakes, you can grab my images, and open them up in Photoshop as a template. Then, create your own unique layout. I used snowflakes from this free vector found on Freepik. Freepik has a bunch of other free snowflake vectors you can use as well.

So the first chunk of CSS adds the snowflakes to the page with the :after CSS selector via the background image. Then, the keyframes are what control the animation. Feel free to play around with the keyframe positioning to customize the falling snowflake animation. You can also change the speed of the snow falling by adjusting the animation in the first chunk of CSS. Simply change is from 15s to something else. :)

Pretty simple right! Oh, and the beauty of adding snowflakes to your site is it’s not just for Christmas, but can be left up all winter long :)

89 Comments

  1. Avatar

    It doesn´t seem to work, I’ve put the sitewide css and nothing happens.

    Reply
    • Avatar

      It could be due to caching. Make sure your caching plugin has been cleared, as well as your browser cache. You’ll notice in my video when I refreshed it once and it didn’t clear. I had to do it a second time with a hard refresh (Control/Command + Shift + R) for it to fully refresh.

      Reply
    • Avatar

      It doesn’t work on Game Boys. It has to be a real computer.

      Reply
  2. Avatar

    Love it – thanks for the information.

    Reply
    • Avatar

      You’re welcome! Glad you found it useful 😃

      Reply
  3. Avatar

    Cool. thank you. But Theme Customizer Additional Css doesn’t like the last bit of your code, specifically the last rule which it wouldn’t allow:

    @-ms-keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
    100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
    }

    I just deleted that rule and it worked great.

    Reply
    • Avatar

      Good to know! Yeah the last key frame isn’t really necessary. It’s really just for older browsers.

      Reply
      • Avatar

        Thanks, David. I’m glad you like it 🙂

        Reply
    • Avatar

      Same for me, it didn’t work until I deleted it. Now it’s working.

      Thanks for the cool post Tim!

      Reply
      • Avatar

        You’re welcome! Glad it worked!! 🙂

        Reply
  4. Avatar

    This is really so awesome!
    Thanks so much!

    Reply
    • Avatar

      You’re welcome! Glad you like it!! 😊👍🏻

      Reply
  5. Avatar

    You’re a Rainmaker! (Snow-maker, I guess.)

    Reply
  6. Avatar

    Works terrific. A super easy CSS drop to impress clients. Thanks Tim!

    Reply
  7. Avatar

    Yes… saves the bloat of an extra plugin! Thanks guys and all the best!

    Reply
    • Avatar

      Definitely! Lightweight for sure! 😄

      Reply
  8. Avatar

    Brilliant, using this now 🙂

    Reply
    • Avatar

      Awesome! Glad you found it useful 😊👍🏻

      Reply
    • Avatar

      No it does. It should work just the same. Make sure you’ve cleared your cache before testing.

      Reply
      • Avatar

        I am having a real problem with it working on Safari.

        Reply
      • Avatar

        Got it working on all devices when I removed ?dl=1 from the image url.

        Love it Tim 🙂

        Reply
        • Avatar

          Interesting! I didn’t have that problem. But I’m glad you got it figured out! And thanks for sharing the fix! 👍🏻

          Reply
  9. Avatar

    What a nice holiday gift! So easy and looks great. I used it on top of a background video on my home page and I think it looks great. Thanks so much!

    Reply
    • Avatar

      You’re welcome, Joe! That’s awesome, glad it worked out for you 😄

      Reply
  10. Avatar

    Jep It’s not working in safari or phone. I already try to remove ?dl=1 without luck…any ideas

    Reply
    • Avatar

      Fixed it by uploading the images to my website! This is just amazing. Thank you guys!

      Reply
      • Avatar

        Okay great! Glad you got it working 🙂

        Reply
    • Avatar

      Hmm that’s very odd. Yeah the ?dl=1 is what lets the Dropbox file be viewed/accessed directly, so I wouldn’t think that would work. Best thing is to always upload to your own site so you’re not relying on any other servers.

      Reply
  11. Avatar

    Thanks! This is fantastic, strange it’s not showing on my homepage though. It’s appearing on all of the other pages.

    danielleshaw.com

    Reply
    • Avatar

      Hi Danielle,

      Try replacing the two instances of “body” in the CSS with #page-container

      That may solve the problem 🙂

      Reply
  12. Avatar

    Tim that is sooo nice of you. I am a happy customer man.

    Reply
    • Avatar

      Glad you found it useful, Ziv! 🙂

      Reply
  13. Avatar

    Thanks Tim!

    Reply
  14. Avatar

    Thank you so much! I’ve never tried anything like this before and it was so simple! Your instructions were great!!

    Reply
    • Avatar

      You’re welcome, Fiona! I’m so glad it worked out for you!! 😄👍🏻

      Reply
  15. Avatar

    Thank you so much for putting the time and effort into this. Wishing you happy holidays!

    Reply
    • Avatar

      You’re welcome, Grant! Merry Christmas and Happy Holidays to you too!! 🙂

      Reply
  16. Avatar

    It works very well on my site. 🙂 Thank you!

    Reply
      • Avatar

        Hello. Now, it doesn’t work. It shows: Expected RBRACE at line …, col 1.
        … @keyframes snow {

        I deleted this:
        @keyframes snow {
        0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
        50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
        100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
        }

        but it didn’t help.

        I use Google Chrome.

        Reply
  17. Avatar

    Thanks Tim for being so generous with your time and expertise. Love the effect on our website!

    Reply
    • Avatar

      You’re very welcome, Jeff. I’m stoked to hear it worked out for you! 🙂

      Reply
  18. Avatar

    Thank you so much!
    I would just ask you about mobile mode. I’ve added the CSS to my page (main page) as you’ve shown, but it works only for my computer, not mobile device.
    How to make it working for all devices, please?
    Thak you!!!!!

    Reply
    • Avatar

      Hi Halyna,

      Others were having the same problem. I think it can be solved by downloading the images and uploading them to your own site. You’ll need to change file paths in the CSS though. Hope that helps!

      Reply
  19. Avatar

    Thank you! It works fantastic.

    Reply
  20. Avatar

    Awesome. Thanks for mentioning this in the newsletter. I’ve added it to my site for the winter. It works great!

    Reply
    • Avatar

      Awesome!! You’re very welcome 👍🏻

      Reply
  21. Avatar

    Thanks, Tim, it looks great. Let’s try it 😉

    Reply
  22. Avatar

    I am using the Divi theme but for some reason in December it started displaying snow and is still doing it? Any ideas what made that happen or how I can stop it doing it?

    Reply
    • Avatar

      Hey Tony,

      I clicked on your website URL and looked at the code. It looks like you have the Jetpack module “Holiday Snowstorm” turned on. Should be a simple switch to turn it off 🙂

      Reply
      • Avatar

        Hi Tim,
        Thanks for the info on the Holiday Snowstorm module however I seem to have no way of getting to that setting through my admin area? My site is not hosted on Wordpress I added Jetpack to my installation and I only see 4 options under the menu item in the admin area, I seem to be missing the General option which is the one I need to be able to turn off Snowstorm – any idea?

        Reply
        • Avatar

          Hi Tim, I have found the setting by logging directly into my account on the Jetpack website and turned it off from there. Thanks for you help with this.

          Reply
  23. Avatar

    Tom, This is soooooo AWESOME! Thank you so much!!!

    Reply
    • Avatar

      Correction to above…Tim…so very sorry!

      Reply
  24. Avatar

    Snowing in Virginia Beach, so now it’s snowing on websites here too! Thanks!

    Reply
    • Avatar

      Perfect! Glad you enjoyed it Shay!! 😊

      Reply
  25. Avatar

    I just found this .. just in time for Christmas .. @Tim .. this is Awesome! Thanks .. One question .. I see it on my desktop but on the mobile .. any idea why? thanks

    Reply
    • Avatar

      You’re welcome! I’m glad you like it! Some phones may not render certain CSS animations. It depends on the phone/OS.

      Reply
  26. Avatar

    I love the code, really nice! Only have one little problem, it ends on the middle of the page and I would like to add it on the whole page. I tried to use background-repeat unfortunately nothing worked.

    Is this to fix?

    https://www.hakoena.com/vlees-kopen-bij-de-boer/

    Reply
    • Avatar

      Hi Fabio, it looks like it’s working to me. Did you get it figured out?

      Reply
      • Avatar

        Hi Tim,

        Yess, I figured out. Thank you! But I have another question. At the moment the start is very hard and if the animation runs one time and start over again, you can see it very clear. Is it possible to make a smooth transition?

        Reply
  27. Avatar

    Thank you so much!!! It works wonderful!

    Reply
  28. Avatar

    Far better than using a plugin, and can just be commented out for the rest of the year.

    Needed to change the z-index to 9999 and removed the last frame to stop jittering, but works fine now.

    Thanks, and Happy Christmas!

    Reply
    • Avatar

      That’s great!! And yes, super simple to comment out and preserve for next year 🙂

      Reply
    • Avatar

      Awesome!! I’m glad it worked for you Levent! 🙂

      Reply
  29. Avatar

    Great, simple way. Now I love Divi even more.. Big thanks..
    by the way I used Auto prefix to fix the last CSS section . And it is now so:

    /*prefix CSS*/
    @keyframes divi-life-snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
    100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
    }

    @-webkit-keyframes divi-life-snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
    100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
    }

    /*Thanks*/

    Reply
  30. Avatar

    I have issues on some of my client sites. Tried all variations mentioned above, but with one site it fails. Cache not used, only Divi static pages. Tried adding the class to sections, modules and columns. Can make it work fine on other sites, this one gives me nada snow…

    Reply
    • Avatar

      Hi Johan,

      Do you have Divi’s new performance features turned on? If so, you may need to try turning them off. I’d recommend starting with the defer Jquery option. Having that turned on will likely cause issues with something like that. So try turning it off, clearing cache (including browser cache), then test again.

      Reply
      • Avatar

        Hi Tim,

        Thanks for replying.

        All performance features except “Defer Additional Third Party Scripts” was enabled. But after disabling all new features and turning them on again, snow finally started to fall!

        Thanks for a great feature, why not make it into a plugin?

        Reply
        • Avatar

          I’m glad you got it resolved, Johan! And that’s a great idea 🙂

          Reply
  31. Avatar

    Hey Tim, I have the snow applied to a section. Within the section, I have a video module. Unfortunately the snow plays on top of the video. Is there a way to bring the video in front of the snow?

    Reply
    • Avatar

      You could try increasing the z-index for the video module in the Advanced Settings of the module. That should work 🙂

      Reply
  32. Avatar

    First Thx for sharing Tim.
    Is it possible to make the cut between the different snowfalls a little bit smoother? You know what i mean?
    Thx,
    Max

    Reply
    • Avatar

      Hi Max,

      You could play with the code and see, but I don’t know off hand.

      Reply
  33. Avatar

    Asking for a friend: Does this works with an Elementor site?

    Reply

Submit a Comment

Your email address will not be published.