How to Add Falling Snow to Webflow Websites (Super Easy)

By Mike Miello

In this post, you'll learn how to easily add snow to your Webflow website.

It's December...

No escaping the holiday music...

So how about joining the fun?

And as a web designer, I just thought....why not bring some of that holiday spirit to my website and at least offer it as a nice option for my Webflow clients. 

And so I put together a quick video on how to add snow to Webflow pages using nothing more than CSS.

I'll explain also what you need to do.

Grab snowflakes CSS code

Head over to the CSSnowflakes to grab the snow code.

All you have to do is copy the entire code that you see on this page from the opening <style> to the bottom that ends with the closing </style>.

And just want to shoutout to Pavel, the programmer! Thanks so much for creating this simple snow code.

Add Webflow embed element to your website

After you copy the snow code, you just need to paste it to your Webflow web page. 

To do this, simply add a Webflow embed element.

With the embed element, paste the snow code. Click Save & Close....and voila! 

You've got snow!!!!

** the beauty of using embed element is that you can see the effects without having to publish your website, which would be the case if you stuck this code in Webflow's header options in the settings panel.

Customize the Snow in the Webflow Embed

Congrats! You might be done here.

But you might want to customize the snowflakes to be bigger or even a different color.

To make changes, you simply will modify the CSS options that are at the top. 

  • Color - use a CSS hex color to change the color
  • Font-family - if you increase the size to 2 em, for example, this will make the snowflakes bigger
  • Text-shadow - this can add a nice drop show to the back. I felt the black (#000) was too much and so I changed my to a gray color (#ccc)

Webflow for the holiday cheer win!

Hope you enjoy this and maybe something you'll try!

If you check out the video, I'd love a comment to tell me if you like these types of videos.

Again, thanks Pavel for making such a simple thing accessible to the Internet community. 

Little things like snowfall, make web design so much fun!! 

And whether snow or not, I wish you happy holidays!

Mike Miello profile image

This post was written by me, Mike, owner of Webodew. Please feel free to contact me anytime.

first Impressions Matter in business.

The last thing you need is your website giving the wrong impression.

Here's a free guide covering 5 major website areas that influence people's perceptions of your business and how you can make changes today!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
5 things your website should cover book cover