Como usar: 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.
Também pesquisado como: rain effect css, rain animation html, rainfall effect website, rain drops css, rain background animation.
Ferramentas que combinam com: 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.
Perguntas frequentes
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.
Posso instalar o CSS Rain Animation como um aplicativo da web e usá-lo offline?
Sim. O CSS Rain Animation é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.