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.