Demo for Pure CSS Raining Background

Preview

Source Code

                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
*{
   margin: 0px;
   padding: 0px;
   box-sizing: border-box;
}
section{
   position: relative;
   height: 100vh;
   width: 100%;
   background-image: url('http://www.devanswer.com/img/road-dark.jpg');
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
}
section::before{
   content: '';
   position: absolute;
   top: 0%;
   left: 0%;
   width: 100%;
   height: 100%;
   background-image: url('http://www.devanswer.com/img/rain_png.png');
   animation: rain 0.19s ease-in infinite;
}
@keyframes rain{
   0%{
      background-position: 10 0;
   }
   100%{
      background-position: 20% 80%;
   }
}
</style>

</head>
<body>
<section>
</section><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>

</body>
</html>

Other Codes

CSS Moving Clouds in the Web Page Background

In this code we have clouds that are moving at the top of the page. This code is very suitable for children or airline website backgrounds.

HTML Dynamic Jellys Shape in Gradient Background

In this background code, we have a gradient with pink and orange colors. A black shape is also constantly moving in the middle of the screen.

Moving Fireflies on Webpage Background Snippet

You can use these beautiful backgrounds for your website. In this post, you will see the background of the forest night where the fireflies are moving.

Parallax Crystals Light Effect For HTML . . .

In this code, there are beautiful lines of light in the background that move slowly. Clicking on these lines will change the background color theme.