CSS Snow Effect

‘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!

css-snow
http://bradsknutson.com/

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

Categories Blog