Pure CSS Rain Animation Effect
Here you can use color instead of white color which is more beautiful and attractive. This design is used in the background of various projects which basically helps to enhance the beauty.
Below I have given a demo that will help you to know how it works. Live Demo 👇👇
See the Pen
Untitled by Foolish Developer (@foolishdevweb)
As you can see above a lot of water droplets are falling from the top to the bottom on a gradient background. This project looks very difficult but it is very easy to make. This beautiful CSS rain animation with Lightning can be created with very little code.
If you only want the source code, you can use the download button below the article. And use the demo section above to get the live demo.
How to Create Rain Animation Effect using CSS
Below I have shown with some steps how I have created Rain Animation Effects using CSS. No HTML code is used here.
These animations can be seen in the background of the webpage. So the body tag of the webpage has been used. So there is no need to use any HTML separately.
Step 1: Design the webpage
I designed the web page using the following CSS codes. Here a black linear gradient is used on the webpage.
Step 2: Design the raindrops
Animation has been used with this meaning that it has to be added how these raindrops will fall from above. Here 1 second is used during animation.
The following @keyframes are now used to make the animation I added above work.
I have added the following calculations of how these raindrops will spread from top to bottom.
If there is any problem to create this pure CSS rain effect then you can definitely let me know by commenting.