Comment utiliser : 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.
Aussi recherché comme : falling confetti css, confetti effect website, css confetti, confetti background animation, celebration animation css.
Outils complémentaires : 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.
Questions fréquentes
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.
Puis-je installer Confetti Animation CSS en tant qu’application web et l’utiliser hors ligne ?
Oui. Confetti Animation CSS est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.