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.
41 Responses
awesome
nice !
Thanks a lot for this! and I saw a folk created a similar effect, but a particle effect instead (and yes he is using elementor) but the procedure above is similar.
Nice. Tried it on one of my pages. Thanks
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.
Thanks Helmut, your tip is fine!
Great feature, thank you and Merry Christmas to all of you at Elementor 🙂
Sweet, where can I download the snow.png?
It is in the code
Thanks.
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!
It’s there at the bottom
I’m not seeing any Christmas templates in the library?
Looks amazing 🙂
Mine is not working.
Fantastic! What a great company Elementor is.
Thanks, working like charm
Great idea and such easy. Thanks a lot.
A bit late to the party, thanks for the idea, it works!
That was VERY cool!
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.
Please contact our support
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 ?
Su
I am also looking for additional elements. I would like to find clear smoke. Does anyone have any suggestion of where to purchase?
How do you disable the effect on mobile? It’s quite slow
Wow Amazing!!!
Its freaking cool
Awesome post… thanks for sharing.
Thanks for sharing such a brilliant idea.
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 !
Thank you. Have the PNG files been removed? i tried them and they didnt work 🙁
Hi Ashkan, the template is available for Elementor Pro users.
Hi Matan. Thanks. I do have Elementor Pro but the PNG files in the CSS dont work. If you enter the URL in your browser to save them, you cant find them.
You are right. We fixed it now.
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
super! implemented right away! Thank you 🙂
Great article…Thanks for the Update..
Having problem while using on Mobile, Can you give me the code to disable on mobile, tablets. Keeping the Desktop intact
Thank you for the update!
Implementing Right Away for my site.
Elementor is a great plugin to make your website responsive, having this now it looks crazy ! 😀
Thanks for the article Ben
This works absolutely great! Doing it right now to my wordpress site
Great stuff…..keep blogging