Cómo usar: Confeti CSS
- La vista previa empieza con Confeti en colores variados.
- Ajusta cuántas piezas hay, su tamaño y velocidad; Balanceo hace que ondeen.
- Desactiva Colores mixtos para usar un solo color de marca.
- Copia el código en tu página de agradecimiento o de éxito.
Confeti que da vueltas
Cada pieza es un pequeño rectángulo que cae con un ligero balanceo mientras rota en 3D (rotate3d), así que gira entre su cara y su canto como un papel real. Los colores se asignan a cada pieza con una propiedad personalizada de CSS.
Para nieve, lluvia o tus propias formas, consulta el Generador de Animación de Partículas.
También se busca como: confetti animation css, confeti cayendo css, efecto confeti web, css confetti, animación confeti fondo, animación celebración css.
Herramientas que combinan con: Confeti 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.
- 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.
- Generador de animaciones CSS — Diseña animaciones CSS sobre una línea de tiempo real de keyframes.
Preguntas frecuentes
¿Cómo añado confeti a una página de agradecimiento?
Copia el HTML + CSS y pégalo en la página. Cae de forma continua sobre la página y no bloquea los clics.
¿Puedo usar los colores de mi marca?
Desactiva Colores mixtos y elige tu color, o edita los valores --c en el HTML.
¿Puede el confeti estallar una sola vez en lugar de repetirse?
Este generador crea caídas continuas. Para una explosión única, cambia infinite por 1 en la regla de animación para que cada pieza caiga una vez.
¿Puedo instalar Confeti CSS como aplicación web y utilizarla sin conexión?
Sí. Confeti 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.