CSS Only Snow Falling Effect

Preview:

Description:

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><span>?</span>️️</snowflake>
<snowflake><span>?</span> ️️</snowflake>
<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