Author

Analytics expert

SEO passionate

User Experience obssessed

Follow me on
Category | UX
Difficulty |

How to Add Snow Effect to Any Part of Your Site with CSS Animation

A couple of days ago I added a snow effect to the cover section of my posts, and people started asking me what kind of magic I used to achieve this.

The truth is that it is pretty simple, in less than 5 minutes you can add this amazing effect to any part of your site.

How to Add Snow Effect Using Only CSS

  1. Locate your file style.css or the CSS plugin you use for customizations.
  2. Copy the following code at the end of the file
    .snow{
       background-image:
               url(https://image.ibb.co/k0aqx6/snow.png),
               url(https://image.ibb.co/eCahc6/snow1.png),
               url(https://image.ibb.co/bOboH6/snow2.png);
       width: 100%;
       height:100%;
       position: absoulute;
       top: 0;
       left: 0;
       z-index:1;

       animation: snow 20s linear infinite;
    }

    @keyframes snow {
        from {background-position: 0px 0px, 0px 0px, 0px 0px;}
        to {background-position: 500px 1000px, 200px 400px, -100px 300px;}
    }

  3. Now add the class snow to any HTML element where you want to add the effect. For example,
    <div class="snow"> </div>
    If you don't see the effect, make sure there are no other css rules overriding the snow background, if that the case you can try adding important to the end of each property, for example, -> width: 100% !important;
     
    Create a snow effect with CSS animation
Add a Stunning CSS Snow Animation to Any Part of Your Site in 5 MinutesClick To Tweet

Resources: CodePen

Author

Analytics expert

SEO passionate

User Experience obssessed

Follow me on
Be the first to comment :)