Cómo usar: Efecto de nieve CSS
- La vista previa empieza con Nieve; elige Copos para copos de seis brazos.
- Ajusta cuántos copos hay, su tamaño y velocidad; activa Viento para que la nieve se desplace.
- Elige toda la página o solo una sección.
- Copia el código y pégalo antes de
</body>.
Un efecto de nieve sin librerías
La nieve es un conjunto de pequeños puntos difuminados que caen a velocidades ligeramente distintas: los copos más pequeños caen más despacio, lo que aporta profundidad, y cada uno se mece suavemente de lado a lado. Todo funciona con animaciones CSS de transform, así que se mantiene fluido y ligero. La capa superpuesta usa pointer-events: none para que los enlaces y botones sigan funcionando.
Hay más efectos (lluvia, estrellas fugaces, confeti, tu propio SVG) en el Generador de animaciones de partículas.
También se busca como: animación de nieve cayendo css, nieve cayendo en la web, efecto de nevada html, efecto de nieve navidad, animación de copos de nieve css, efecto de nieve javascript.
Herramientas que combinan con: Efecto de nieve CSS
- Animación de lluvia CSS — Haz que llueva en una página o en la sección principal, desde una llovizna suave hasta un aguacero inclinado.
- 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 añado nieve a mi web para Navidad?
Copia el HTML + CSS de aquí y pégalo justo antes de la etiqueta de cierre body, o en un bloque Custom HTML / Embed en WordPress, Webflow o Shopify. Quítalo al terminar la temporada.
¿La nieve bloquea los clics?
No. La capa usa pointer-events: none, así que los visitantes pueden hacer clic en todo lo que hay debajo.
¿Puedo hacer que nieve solo en la cabecera?
Sí: elige Una sección, pega el código dentro de tu cabecera y asígnale position: relative.
¿Puedo instalar Efecto de nieve CSS como aplicación web y utilizarla sin conexión?
Sí. Efecto de nieve 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.