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