CSS Only Snow Falling Effect

Category: Animation , CSS & CSS3 | February 1, 2019
Views Total:7,184 views
Official Page:Go to website
Last Update:February 1, 2019


CSS Only Snow Falling Effect


A CSS only snow falling effect for the winter & holiday theme of your website.

Fully customizable by overriding the variables in the snowfall.scss.

How to use it:

Include the stylesheet snowfall.css in the document’s head section.

<link rel="stylesheet" type="text/css" href="css/snowfall.css">

Add snowflakes to the webpage.

<snowflake><span>?</span> ️️</snowflake>
<snowflake><img src="img/snowflake.png">️</snowflake>

Override the default variables to customize the snow falling effect.

$count: 50;
$screenOffset: 100px;
$fallDuration: 8;
$windNoise: 30;
$windSpeed: 10;
$sizeNoise: 40;
$rotation: 720;
$imageSize: 20px;
$fontSize: 40px;
$ sass ./src/sass/snowfall.scss ./dist/css/snowfall.css

You Might Be Interested In:

2 thoughts on “CSS Only Snow Falling Effect

  1. Mat

    It unfortunately totally glitches in IE… snowflakes are moving horizontally only at the top of page.

    1. Sid

      Replace below in CSS file:
      calc(100% + 100px) with 110%
      calc(0% – 100px) with -10%
      And it will works smoothly in IE as well.

      because calc does not work properly in IE.


Leave a Reply