Create Snowfall Animation Purely with CSS

Preview:

Description:

This unique CSS project lets you experience the beauty of snowfall right on your webpage.

Built using pure CSS, it employs radial gradients to craft realistic snowflakes and the magic of CSS3 Animation to bring them to life as they descend gracefully.

With an added touch of a 3D depth-of-field effect, snowflakes blur based on their distance, offering your page a mesmerizing three-dimensional ambiance.

How to use it:

1. Insert the following HTML to your webpage where you desire the snow effect:

<div class="snow_wrap">
  <div class="snow"></div>
</div>

2. Integrate the necessary CSS/CSS3 styles associated with the snowfall effect onto your page.

.snow_wrap {
  height: 100vh;
  width: 100%;
  background: url("bg.jpg");
  background-size: cover;
  background-position: center bottom;
  position: relative;
  overflow: hidden;
}
.snow,.snow:after,.snow::before {
  content: '';
  position: absolute;
  top: -650px;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: radial-gradient(4px 4px at 100px 50px,#fff,transparent),
                    radial-gradient(6px 6px at 200px 150px, #fff,transparent),
                    radial-gradient(3px 3px at 300px 250px,#fff,transparent),
                    radial-gradient(4px 4px at 400px 350px,#fff,transparent),
                    radial-gradient(6px 6px at 500px 100px,#fff,transparent),
                    radial-gradient(3px 3px at 50px 200px,#fff,transparent),
                    radial-gradient(4px 4px at 150px 300px,#fff,transparent),
                    radial-gradient(6px 6px at 250px 400px,#fff,transparent),
                    radial-gradient(3px 3px at 350px 500px,#fff,transparent),
                    radial-gradient(4px 4px at 550px 550px,#fff,transparent);
  background-size: 650px 650px;
  animation: SnowAnim 3s linear infinite;
}
.snow:after {
  margin-left: -250px;
  opacity: 0.5;
  filter: blur(2px);
  animation-direction: reverse;
  animation-duration: 6s;
}
.snow::before {
  margin-left: -350px;
  opacity: 0.7;
  filter: blur(1px);
  animation-direction: reverse;
  animation-duration: 9s;
}
@keyframes SnowAnim {
  from {
      transform: translateY(0);
  }
  to {
      transform: translateY(650px);
  }
}

3. Feel free to override and customize the provided CSS/CSS3 styles to make the snowfall animation align with your personal or brand aesthetics.