How to Create a Christmas Snow Effect in Elementor

34 Comments

Adding falling snow to your website is a great way get into the Christmas festive spirit. For this, all we need to do is embed a small piece of CSS, using Elementor's custom CSS feature.

Subscribe to Our YouTube Channel

Tis’ the season to be jolly and for many, tis’ also the season to start shopping.

eCommerce websites get a huge surge of traffic during the days preceding Christmas. Why not encourage your site visitors to buy or sign up for your services by decorating your website with a wintery snowfall effect.

Adding a CSS snow effect can have a positive impact on your holiday sales. Plus it’s fun, so why not do it?

Follow these steps to add a snow effect to any section, column or widget.

Step 1 - Find the Page's Custom CSS Settings

Go to Menu -> Page Settings -> Style -> Custom CSS

We will be pasting the CSS code inside the Custom CSS

Step 2 - Paste the CSS code

Paste the CSS Snowfall effect code from Pastebin.

You can get the code here:
.snow-bg {
   position: relative;
}

.snow-bg:after {
   content: '';
   display: block;
   position: absolute;
   z-index: 2;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   pointer-events: none;
   background-image: url('https://library.elementor.com/resources/christmas-snow-effect/s1.png'), url('https://library.elementor.com/resources/christmas-snow-effect/s2.png'), url('https://library.elementor.com/resources/christmas-snow-effect/s3.png');
    animation: snow 10s linear infinite;
}

@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;}
}

This code has been based on a Codepen by Nicky Christensen, and I’d like to take this opportunity to thank her for the code.

Important Note: We recommend you download the snowflake images, upload them to your website and replace the links in the code to your own URL. 

Step 3 - Add the CSS class

Choose the element you want to apply the snow effect to, click on the advanced tab and paste ‘snow-bg’ in the CSS class field 

DONE!

Have a very merry Christmas and a jolly good time decorating your site.

If you have an innovative idea for making your website more festive, I’d appreciate it if you could write about it in the comments below.

About the Author

Ben Pines

Ben Pines is Elementor's CMO. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time it was used solely for blogging.

34 Responses

  5. Thanks a lot for this great idea. If you put the css-code in the customizer of your theme (I use Generate Press Premium), you don’t need to insert it in every page, where you would like to have this effect.

    Reply

  8. This looks amazing! Thanks guys.
    Just one question –
    I’m using Elementor pro, but I don’t see the new Christmas template in my template library.
    Is there Is a way to download it and add it to the library?
    Thanks!

    Reply

  16. This does not works for me. I can´t find this patch: Go to Menu -> Page Settings -> Style -> Custom CSS. I tried Menus in the WP menu pages and didn´t find this path too. I tried to insert the code in Custom CSS Generate Press but does not work. Does this effects works on entire page?
    Any help please? Tks.

    Reply

  17. Thanks for this!

    This could be great for other festive moments too.
    Are there png’s with colored confetti or hearts too?
    I’m thinking thank you pages with confetti celebrating the action someone took (purchase / opt-in) and hearts on sales pages pre valentine ?

    Reply

  25. If I want to upload my own png.. what link do I use instead of the below please ?

    url(‘https://library.elementor.com/resources/christmas-snow-sffect/s1.png’), url(‘https://library.elementor.com/resources/christmas-snow-sffect/s2.png’), url(‘https://library.elementor.com/resources/christmas-snow-sffect/s3.png’);
    animation: snow 10s linear infinite

    thanks !

    Reply

Leave a Reply