5 modern snow effects for your website

Roughly a 2 minute read by Jamie

Snow effects get a bit of a bad rep on the Internet. Whilst some may think they’re a bit, well, tacky, there’s nothing that quite says Christmas like a few snowflakes drifting gently down the screen…

The future is now: Our top 5 snow effects

I’ve collected my favourite Codepen examples of modern snow effects for the more adventurous amongst you to add to your websites when the time comes (soon!). If you’re lucky enough to have some minions to do your festive bidding, then send this article over to them with your snow-related demands (and please direct any hate mail here).

Let there be snow!

You have lots of options these days. The one below features snow that not only falls from the sky (a pretty essential feature, I know), but it also avoids your cursor!

1. Snow that avoids your cursor

See the Pen Its snowing! by Loktar (@loktar00) on CodePen.

2. 3D snow effect

Next up with have a pretty standard subtle affair with multiple layers to give a pretty depth effect.

See the Pen CSS Falling Snow by Jamie Wright (@iamjamie) on CodePen.

3. Snowstorm effect

Distant blurry snow flakes not your thing? Well, you're catered for, too. They come in bright and bold below.

See the Pen Snow by pimskie (@pimskie) on CodePen.

4. Snow that moves with your cursor

How about being able to take control of the wind direction, with your mouse? Yes.

See the Pen Happy Xmas! by Paul Neave (@neave) on CodePen.

5. Blizzard!

So you've seen a lot of snow now, and maybe you're feeling a little underwhelmed. Lets go big, stick a blizzard on your site; what could go wrong?

See the Pen Midnight Snow by Tiffany Rayside (@tmrDevelops) on CodePen.

It couldn't be more simple

1. Choose the right snow for you
2. Add the CSS & JavaScript to your code
3. ???
4. PROFIT!

Jamie has a keen eye for design, striving for pixel perfection and consistency within the user interfaces he builds.