Comment utiliser : 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.
Aussi recherché comme : rain effect css, rain animation html, rainfall effect website, rain drops css, rain background animation.
Outils complémentaires : 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.
Questions fréquentes
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.
Puis-je installer CSS Rain Animation en tant qu’application web et l’utiliser hors ligne ?
Oui. CSS Rain Animation est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.