How to use the 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.
Also searched as: falling confetti css, confetti effect website, css confetti, confetti background animation, celebration animation css.
Tools that pair well with the 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.
Frequently asked questions
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.
Can I install Confetti Animation CSS as a web app and use it offline?
Yes. Confetti Animation CSS is an installable web app (PWA) — installed from your browser, not downloaded from an app store. Click Install app at the top of this page in Chrome or Edge (Windows, macOS, Linux, ChromeOS) or on Android, use Share → Add to Home Screen on iPhone and iPad, or File → Add to Dock in Safari 17+ on a Mac. It then opens in its own window with its own icon, and because it runs entirely in your browser it keeps working offline. Firefox on desktop can’t install web apps. How installing works.