CSS Rain

css rain mean how to show rain effect in css , actually it really simple we need only two image one for background and other one for rain effect .

1.Background image :

I prefer unsplash you can use any rain background image

2. Rain image :

it main rain image

3. little bit css

/*for background image*/section {
 position: relative;
 width: 100%;
 height: 100vh;
 background-image: url(https://images.unsplash.com/photo-1527277199115-b43f3dcf8a8a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80);
 background-size: cover;
 background-position: center;
}/*adding rain img and making opacity 0*/section:before {
 content: “”;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-image: url(https://media.geeksforgeeks.org/wp-content/uploads/20200828184719/rain-300x300.png);
 animation: rain 0.4s linear infinite;
 opacity: 0;
}/* just changing the position of image
  of rain using keyframes*/@keyframes rain {
  0% {
    background-position: 0 0;
    opacity: 1;
  }100% {
    background-position: 8% 80%;
    opacity: 1;
  }
}

section {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url(https://images.unsplash.com/photo-1527277199115-b43f3dcf8a8a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80);
  background-size: cover;
  background-position: center;/*adding background to section and animation named color-change*/ animation: color-change 10s linear infinite;
  animation-delay: 1s;
}/* applying filter at different angle on diffrent interval using keyframe*/
@keyframes color-change {
  0% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}