CSS Snow Effect

  • follow us in feedly
Published January 4, 2014 by Brad Knutson
CSS Snow

‘Tis the season, right?

If there is any time of the year it’s appropriate to have a snow effect on your site, now is the time.

So, with the holiday spirit in mind, I’d like to show you how to create this effect quickly and easily with a little help from our web design friend, CSS!

The Demo

The CSS

To create this effect, we’ll need three different “snow” graphics. These are transparent images of varying degrees of size and focus. We’ll overlay these three graphics on top of one another for a bit of depth.

Let’s style the background with these images. I’ve uploaded them to Imgur, feel free to use them.

body {
    background-color: #6b92b9;
    background-image: url('http://i.imgur.com/BiSmXaq.png'), url('http://i.imgur.com/XHuy0NJ.png'), url('http://i.imgur.com/okpRxJU.png');
}

Next, let’s create the keyframe. This is necessary to animate the background images as shown in the example above. If you’re read any of my posts before, you’re probably familiar with CSS Keyframes by now. If not, check out this post.

@-webkit-keyframes snow {
    0% { background-position: 0px 0px, 0px 0px, 0px 0px }
    50% { background-color: #b4cfe0 }
    100% {
        background-position: 500px 1000px, 400px 400px, 300px 300px;
        background-color: #6b92b9;
    }
}
@-moz-keyframes snow {
    0% { background-position: 0px 0px, 0px 0px, 0px 0px }
    50% { background-color: #b4cfe0 }
    100% {
        background-position: 500px 1000px, 400px 400px, 300px 300px;
        background-color: #6b92b9;
    }
}
@-ms-keyframes snow {
    0% { background-position: 0px 0px, 0px 0px, 0px 0px }
    50% { background-color: #b4cfe0 }
    100% {
        background-position: 500px 1000px, 400px 400px, 300px 300px;
        background-color: #6b92b9;
    }
}
@keyframes snow {
    0% { background-position: 0px 0px, 0px 0px, 0px 0px }
    50% { background-color: #b4cfe0 }
    100% {
        background-position: 500px 1000px, 400px 400px, 300px 300px;
        background-color: #6b92b9;
    }
}

Our “snow” keyframe is slowly moving each background image independently of one another at different paces to create the awesome effect of snow falling.

You can change the speed or direction by modifying the background positions in the keyframe at 100%.

Finally, our last step is to add the keyframe to the style for the body tag to complete the animation.

body {
    background-color: #6b92b9;
    background-image: url('http://i.imgur.com/BiSmXaq.png'), url('http://i.imgur.com/XHuy0NJ.png'), url('http://i.imgur.com/okpRxJU.png');
    -webkit-animation: snow 20s linear infinite;
    -moz-animation: snow 20s linear infinite;
    -ms-animation: snow 20s linear infinite;
    animation: snow 20s linear infinite;
}

The Finished Product

That’s all there is too it! Not very complicated, right?

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

2 thoughts on “CSS Snow Effect

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">