Como usar: Confetti Animation CSS
- The preview starts with Confetti in mixed colors.
- Set how many pieces, size and speed; Sway makes them flutter.
- Turn off Mixed colors for one brand color.
- 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.
Também pesquisado como: falling confetti css, confetti effect website, css confetti, confetti background animation, celebration animation css.
Ferramentas que combinam com: 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.
Perguntas frequentes
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.
Posso instalar o Confetti Animation CSS como um aplicativo da web e usá-lo offline?
Sim. O Confetti Animation CSS é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.