Animated snow with CSS

Animated snow with CSS3

Although put animated snow on a page, be it from us or from a client, it sounds like a design practice older than anything else, the truth is that the animation that we present on this occasion is the sea of ​​elegant. Also you don't need JavaScript, it's simple CSS3.

The first thing is to take a look at the animation.

Looks pretty good, right? To put it into practice, we only need to create three images with white dots and animate them using the property @keyframes of CSS3 as follows:

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

Adding the different prefixes for different browsers, then establishing for our body:

body {
background-color: #6b92b9;
background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
animation: snow 20s linear infinite;

Also adding the necessary prefixes. The full procedure with detailed explanations, courtesy of Joshua Johnson, can be found on his blog.

More information - CSS3 Gradient Generator, CSS3 Gradient Generator
Source - design shack

Leave a Comment

Your email address will not be published. Required fields are marked with *



  1. Responsible for the data: Miguel Ángel Gatón
  2. Purpose of the data: Control SPAM, comment management.
  3. Legitimation: Your consent
  4. Communication of the data: The data will not be communicated to third parties except by legal obligation.
  5. Data storage: Database hosted by Occentus Networks (EU)
  6. Rights: At any time you can limit, recover and delete your information.