Cómo usar: Animación de lluvia CSS
- La vista previa empieza con Lluvia. Sube Cuántas para un aguacero.
- Ajusta el tamaño de las gotas (largo) y la velocidad.
- Usa el Viento para inclinar la lluvia: cada gota se inclina en la dirección en que se mueve.
- Copia el código.
Cómo se dibuja la lluvia
Cada gota es un elemento fino con un degradado que va de transparente al color de la gota, de modo que parece una estela de movimiento. Cae rápido en línea recta; con viento, la gota se desplaza hacia un lado en unidades de la altura del contenedor y se rota el mismo ángulo, así que siempre apunta hacia donde se mueve. Un fondo oscuro con tono azulado realza el efecto.
Para nieve, estrellas o confeti, consulta el Generador de animación de partículas.
También se busca como: efecto de lluvia css, animación lluvia html, efecto lluvia para web, gotas de lluvia css, animación de lluvia de fondo.
Herramientas que combinan con: Animación de lluvia CSS
- Efecto de nieve CSS — Haz que nieve en tu web por las fiestas: nieve suave o copos, una ligera nevada o una ventisca.
- Estrellas fugaces — Haz que estrellas fugaces crucen un cielo nocturno en el hero, o deja que figuras de estrella caigan y giren.
- Confeti CSS — Celebra un lanzamiento, un registro o un cumpleaños con confeti cayendo que ondea y da vueltas en colores variados.
- Generador de Keyframes CSS — Un editor visual para @keyframes.
Preguntas frecuentes
¿Cómo hago un efecto de lluvia en CSS?
Anima muchas líneas finas con degradado que empiecen por encima del borde superior y terminen por debajo del inferior, con temporización lineal y duraciones cortas y ligeramente distintas. Este generador escribe ese CSS por ti.
¿Puede la lluvia caer en diagonal?
Sí: ajusta el Viento. Las gotas se desplazan hacia un lado y se rotan para seguir ese movimiento.
¿Puedo añadir lluvia a una sola imagen o a una sección principal?
Sí: elige Una sección y pega el código dentro de la sección principal, que necesita position: relative.
¿Puedo instalar Animación de lluvia CSS como aplicación web y utilizarla sin conexión?
Sí. Animación de lluvia CSS 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.