Author

Analytics Expert. Passionate about SEO and User Experience or what he calls UX-SEO

Follow me on

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.

Add a Stunning CSS Snow Animation to Any Part of Your Site in 5 MinutesClick To Tweet

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://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png'),
                url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.png'),
                url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.png');
       width: 100%;
       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>
     
    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. Passionate about SEO and User Experience or what he calls UX-SEO

Follow me on
Be the first to comment :)