Configurable Rain Effect in CSS

Image: Configurable Rain Effect in CSS GIF

This is a CSS rain effect with multiple configuration options. You can choose to have a single drop or multiple drops coming in. You can also add and remove the splash effect when raindrop hit the ground and you can add backdrop as well. This snippet was designed by Aaron Rickle.

If you are having trouble with the pen, try the archived copy on GitHub

See the Pen CSS Rain Effect by Aaron Rickle (@arickle) on CodePen.0

Posted by:Hima Vincent

Hima Vincent is the founder & editor in chief of CodeMyUI. She is a writer by day and a reader by night who helps web designers build awesome projects by sharing amazing code snippets for inspiration. Hobbies include designing, card games, photography and exploring the culinary arts.