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

E-commerce websites see a huge surge of traffic during the days leading up to Christmas. Now more than ever, as people are home-bound due to the pandemic, consumers are looking for a comforting alternative to their usual window shopping. This year, instead of crowding around to see holiday display windows, shoppers will be happy to be welcomed by a snowfall effect on e-commerce websites. Why not encourage your site visitors to buy or sign up for your services by decorating your website with a warm and cozy snowfall effect?

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

Follow these steps to add a snowfall effect to any section, column or widget on your Elementor site.

Prepare Your Online Store for the Holiday Season

Step 1 - Find the Page's Custom CSS Settings

Go to Menu > Page Settings > Style > Custom CSS

01 page settings How to Create a Christmas Snow Effect in Elementor 1

We will be pasting the CSS code inside the Custom CSS section.

02 style custom css How to Create a Christmas Snow Effect in Elementor 2

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.

03 Paste the code 1 How to Create a Christmas Snow Effect in Elementor 3

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. 

06 Replace links 1 How to Create a Christmas Snow Effect in Elementor 4

Step 3 - Add the CSS class

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

08 pasteclass How to Create a Christmas Snow Effect in Elementor 5

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 love for you to write about it in the comments below.