today I will give you tutorial of how to add snow falling effect in your website background with a live demo.

What is snow falling effect

It's type of animation which you can put in your website's background and make it more Awesome, Cool, Attractive. This snow falling animation give a beautiful look to your website and attract users toward your website.

benifits of snow falling effect

1. Make your site cool, Attractive, modern 
2. Attract users toward your website
3. Prevent your user from boring
4. Increase your earnings: This animation attract users toward your website which directly increase on your earnings. Users stay more on your website and increase your ads impressions

Now follow some steps to add snow falling animation/effect in your website

steps

1. Go to Blogger.com
2. Click on side bar navigation then click on theme section
3. Then Click the down arrow 🔽 icon next to the Customize button
4. select Edit HTML.
5. Find </head>
6. Then copy the below css and paste it above the </head>

<style type='text/css'>
/* Snow Falling Effect */
.techyball{position:fixed;top:0;left:0;right:0;pointer-events:none;z-index:20}
.snowstech{height:100%;position:relative;overflow:hidden;z-index:1}
</style>

7. Copy the Code Provided Below and Paste it Above the </body>  tag.

<div class='snowstech'>
<canvas class='techyball' id='techyball'></canvas>
</div>
<script type='text/javascript'>
//<![CDATA[
!function(){function t(t){var n=t.getContext("2d"),e=0,i=0,o=[],d=function(){this.x=this.y=this.dx=this.dy=0,this.reset()};function a(){e=window.innerWidth,i=window.innerHeight,t.width=e,t.height=i,function(t){if(t!=o.length){o=[];for(var n=0;n<t;n++)o.push(new d)}}(e*i/1e4)}d.prototype.reset=function(){this.y=Math.random()*i,this.x=Math.random()*e,this.dx=1*Math.random()-.5,this.dy=.5*Math.random()+.5},a(),function t(){n.clearRect(0,0,e,i),n.fillStyle="rgba(255,255,255,.3)",o.forEach(function(t){t.y+=t.dy,t.x+=t.dx,t.y>i&&(t.y=0),t.x>e&&(t.reset(),t.y=0),n.beginPath(),n.arc(t.x,t.y,5,0,2*Math.PI,!1),n.fill()}),window.requestAnimationFrame(t)}(),window.addEventListener("resize",a)}var n;n=function(){t(document.getElementById("techyball"))},"loading"!=document.readyState?n():document.addEventListener("DOMContentLoaded",n)}();
//]]>
</script>

Don't forget to save your theme

If you want demo then please click on the dark mode button of our website which is placed at top of our website



just switch this button

May this demo not available in future

Conclusion

I made this post step by step on How To Add Snow Falling Animation In Blogger Website. I hope you have liked it and Please do share with your friends and follow our blog for more

if you face any problems or have any questions please feel free to ask in comments section or Contact us