How to use the CSS Rain Animation
- The preview starts with Rain. Raise How many for a downpour.
- Set the drop size (length) and speed.
- Use Wind to slant the rain — each drop tilts to its direction of travel.
- Copy the code.
How the rain is drawn
Each drop is a thin element with a gradient from transparent to the drop color, so it looks like a streak of motion. It falls quickly in a straight line; with wind, the drop moves sideways in container-height units and is rotated by the same angle, so it always points the way it moves. A dark, bluish background sells the effect.
For snow, stars and confetti see the Particle Animation Generator.
Also searched as: rain effect css, rain animation html, rainfall effect website, rain drops css, rain background animation.
Tools that pair well with the CSS Rain Animation
- CSS Snow Effect — Let it snow on your website for the holidays: soft snow or snowflakes, light flurries or a blizzard.
- Falling Stars Animation — Send shooting stars streaking across a night-sky hero, or let star shapes drift down and twirl.
- Confetti Animation CSS — Celebrate a launch, a sign-up or a birthday with falling confetti that flutters and tumbles in mixed colors.
- CSS Keyframes Generator — A visual editor for @keyframes.
Frequently asked questions
How do I make a rain effect in CSS?
Animate many thin gradient streaks from above the top edge to below the bottom with linear timing and short, slightly different durations. This generator writes that CSS for you.
Can the rain fall at an angle?
Yes — set Wind. The drops move sideways and are rotated to match.
Can I add rain to a single image or hero?
Yes — choose One section and paste the code inside the hero, which needs position: relative.
Can I install CSS Rain Animation as a web app and use it offline?
Yes. CSS Rain Animation is an installable web app (PWA) — installed from your browser, not downloaded from an app store. Click Install app at the top of this page in Chrome or Edge (Windows, macOS, Linux, ChromeOS) or on Android, use Share → Add to Home Screen on iPhone and iPad, or File → Add to Dock in Safari 17+ on a Mac. It then opens in its own window with its own icon, and because it runs entirely in your browser it keeps working offline. Firefox on desktop can’t install web apps. How installing works.