Falling Rain Streaks

About this animation

A rainy cloud scene where thin streaks fall on staggered timings, made from absolutely positioned elements.

How it works

Ten thin streaks are placed along the top at different left positions. Each is a tall gradient from transparent to light blue and falls with a linear translateY animation. Negative delays derived from the position keep the streaks out of step, and overflow: hidden clips them at the bottom of the scene.

Ways to customise it

• Change the gradient colour for snow or a different weather.
• Shorten the duration to make heavier rain.
• Add more streaks by repeating the nth-child pattern.

Good to know

Decorative and disabled for reduced motion. Linear timing keeps the fall feeling natural. For a full-page effect put the streaks in a fixed, pointer-events: none layer.

Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.