Cómo usar: Generador de partículas
- Elige un efecto y haz clic en + Añadir capa para apilar más (por ejemplo, nieve con estrellas fugaces); quita una capa con su ×. Efectos: nieve, copos de nieve, lluvia, estrellas fugaces, estrellas que caen, confeti, pétalos, hojas, corazones, burbujas, o Mi SVG / imagen para subir el tuyo, o Emoji.
- Ajusta cuántas, el tamaño, la velocidad, el viento y el balanceo. Pausa entre hace que las partículas aparezcan de vez en cuando, como las estrellas fugaces.
- Elige si cubre toda la página (superposición fija) o una sección.
- Copia el HTML + CSS (sin JavaScript) o la versión más corta en JavaScript, o descarga una página de demostración.
Cómo funciona la animación
Cada partícula es un elemento <i> con su propio tamaño, posición inicial, duración y retardo, guardados en propiedades personalizadas de CSS. Una sola regla @keyframes la mueve desde justo encima del borde superior hasta debajo del inferior; un <b> interno se balancea de lado a lado y gira. Solo se anima transform, así que el navegador lo procesa en la GPU sin recalcular el diseño de la página.
.dp-fall { position: fixed; inset: 0; overflow: hidden; pointer-events: none; container-type: size; }
.dp-fall i { position: absolute; top: 0; animation: dp-fall var(--d) linear var(--t) infinite; }
@keyframes dp-fall { to { transform: translate(var(--dx), calc(100cqh + var(--s) * 3)); } }Los retardos negativos hacen que cada partícula empiece a mitad de su caída, así que la pantalla ya está llena al cargar la página. pointer-events: none deja pasar los clics, y prefers-reduced-motion oculta el efecto a los visitantes que desactivaron las animaciones.
Usar tu propio SVG
Elige Mi SVG / imagen y sube un SVG, PNG, WebP o GIF pequeño: un logotipo, un copo de nieve, una moneda. Se incrusta en el CSS como data URI, así que el fragmento sigue sin necesitar archivos adicionales. Las formas integradas se dibujan con una máscara CSS, por lo que Colores mezclados puede cambiar el color de cada una.
Relacionado: Generador de Keyframes CSS, Generador de Animaciones CSS, Generador de Blobs SVG.
También se busca como: generador de animación de partículas, efecto de partículas css, efecto de nieve css, animación nieve cayendo css, efecto de lluvia css, animación estrellas fugaces css, animación de confeti css, animación hojas cayendo css.
Herramientas que combinan con: Generador de partículas
- Generador de Olas SVG — Diseña separadores ondulados para landing pages: añade o quita olas (hasta 6, cada una con su propio color, opacidad y forma), ajusta el número de crestas, la altura y la suavidad, elige colores y decide si la ola va arriba o abajo.
- Generador de loaders CSS — Elige entre 13 spinners de carga solo con CSS, ajusta tamaño, colores, grosor y velocidad, y copia HTML y CSS ligeros y accesibles, sin imágenes, SVG ni JavaScript.
- Generador de Gradientes CSS — Diseña un degradado visualmente: arrastra las paradas de color, cambia el ángulo o el tipo, parte de un preajuste y copia CSS listo para producción con un color de respaldo sólido.
- Generador de efectos hover CSS — Diseña animaciones hover para botones, tarjetas, enlaces e iconos.