OneTaskBy Tim King · Updated
CSS Rain Effect
Falling Rain Streaks Over a Section Background, Angle and Drop Count
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the CSS Rain Effect works
This CSS rain effect generator fills a section with streaks of rain falling at the angle and speed you choose, behind a heading of your own. Set the number of drops, their length and colour, then copy the HTML and CSS.
Rain gives a hero or banner a moody, wintry or cosy feel, and because it is built from plain elements and CSS it costs far less than a video background.
How the CSS rain effect is built
Every drop is an empty <i> with a thin gradient that fades from clear to the rain colour. Each one
gets its own position, delay, speed and opacity through an nth-child rule, generated from a fixed
seed so the pattern stays the same every time you copy it. One shared keyframe moves the drops down
and sideways to match the angle.
Keeping it light
Forty drops is plenty for most banners. More drops look heavier but each one is an animated element, so stay below about eighty on pages that need to run smoothly on older phones.
FAQ
Does the rain cover clickable content?
The drops sit behind the content layer, which has a higher z-index, so buttons and links in the section stay clickable. Add pointer-events: none to the drops if you move them in front.
How do I make the rain slant the other way?
Use a negative angle. The drops tilt to match and the keyframe moves them sideways in the matching direction, so they always fall along their own line rather than drifting.
Does the rain stop for people who prefer less motion?
Yes. The copied CSS includes a prefers-reduced-motion rule that switches the animation off, leaving the streaks still at the top of the section where they are barely visible.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Snow Effect
Add gently falling, drifting snow behind a section.
Starfield Background
Make stars stream past as if flying through space.
Particle Background
Build a drifting network of connected dots, no library.
Bokeh Background
Drifting blurred lights behind a heading, in pure CSS.
Hero Section Builder
Landing page hero sections with fluid headline and buttons.