CSS Rain Effect
Looks best with a taller window/layout.
Rain drop elements animate down the screen, stem element inside animates to disappear toward the end of the drop's fall, splat element animates after the stem disappears.
Splatters are unfortunately disabled by default as it is rather intensive and significantly lowers framerate on most machines (in Chrome that is--FireFox and Edge are smoother actually). You can hit the splat toggle to turn it on. The effect is achieved by putting a dotted border-top on an ellipse element, and animating it from scale(0) to scale(1). You can get a better look at it by enabling the single and splat toggles.
There's also a back row you can enable, which is positioned upwards and mirrored.
Does not work well with IE11 at all for whatever reason. Rain drops will not even show unless you jiggle the window size a bit, and at that point all the animations are out of sync.