How to Create a Christmas Snow Effect in Elementor

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.

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.

Liked This Article?

We have a lot more where that came from! Join 715,710 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

About the Author

Ben Pines
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.

Share on

Share on facebook
Share on google
Share on twitter
Share on linkedin

Comments

41 Responses

  1. 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.

  2. 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!

  3. 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.

  4. 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 ?

  5. 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 !

  6. Hi, maybe someone knows, if it is possible that if I have 3 slides running, that one restricts the animation on a slide? regards/Thanks Jan

Leave a Reply

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

Want to learn how to build better websites?

Join 715,710 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.