Cómo 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.
También se busca como: rain effect css, rain animation html, rainfall effect website, rain drops css, rain background animation.
Herramientas que combinan con: 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.
Preguntas frecuentes
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.
¿Puedo instalar CSS Rain Animation como aplicación web y utilizarla sin conexión?
Sí. CSS Rain Animation es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.