devpack
EnglishDeutsch · StartseiteFrançais · AccueilEspañol · InicioPortuguês (Brasil) · Início
Auditoría web

Esta página aún no está traducida al español, así que la mostramos en inglés.

Confetti Animation CSS — Falling Confetti Generator

Celebrate a launch, a sign-up or a birthday with falling confetti that flutters and tumbles in mixed colors. Pure CSS — paste it on a thank-you page and you are done.

Actualizado el 


  


    
 Tus datos nunca salen de tu ordenador. Todo se procesa localmente en tu navegador.

    
    
    

      
Cómo usar: Confetti Animation CSS
  1. The preview starts with Confetti in mixed colors.
  2. Set how many pieces, size and speed; Sway makes them flutter.
  3. Turn off Mixed colors for one brand color.
  4. Copy the code onto your thank-you or success page.
Confetti that tumbles
Each piece is a small rectangle that falls with a slight sway while rotating in 3D (rotate3d), so it flips between its face and its edge like real paper. Colors are picked per piece with a CSS custom property.
For snow, rain and your own shapes see the Particle Animation Generator.
También se busca como: falling confetti css, confetti effect website, css confetti, confetti background animation, celebration animation css.
Herramientas que combinan con: Confetti Animation CSS
  • 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.
  • CSS Rain Animation — Make it rain on a page or hero section — from a light drizzle to a slanted downpour.
  • CSS Animation Generator — Design CSS animations on a real keyframe timeline.
Preguntas frecuentes
How do I add confetti to a thank-you page?
Copy the HTML + CSS and paste it into the page. It falls continuously over the page and does not block clicks.
Can I use my brand colors?
Turn off Mixed colors and pick your color, or edit the --c values in the HTML.
Can confetti burst once instead of looping?
This generator makes continuous falls. For a one-time burst, change infinite to 1 in the animation rule so each piece falls once.
¿Puedo instalar Confetti Animation CSS como aplicación web y utilizarla sin conexión?
Sí. Confetti Animation 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.

      
    

    
    
Herramientas relacionadas
localParticle Animation GeneratorAdd falling snow, rain, shooting stars, confetti, petals, autumn leaves, hearts or rising bubbles to any…localCSS Snow EffectLet it snow on your website for the holidays: soft snow or snowflakes, light flurries or a blizzard. Copy…localFalling Stars AnimationSend shooting stars streaking across a night-sky hero, or let star shapes drift down and twirl. Control…localCSS Rain AnimationMake it rain on a page or hero section — from a light drizzle to a slanted downpour. Drops tilt to match…localCSS Animation GeneratorDesign CSS animations on a real keyframe timeline. Start from 50+ presets, scrub through every frame,…localCSS Keyframes GeneratorA visual editor for @keyframes. Add keyframes on a timeline, set transforms, opacity, blur and color at…