css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Smooth, sleek, responsive and retina ready confetti animation effect. There are two types of confetti, the traditional pieces of ‘paper’ and a ribbon type that wiggles its way down the screen. The ribbon confetti uses a physics simulation for the motion while the paper confetti is animated using sine functions.


  1. Hey, don't want to seem like a jerk, but didn't this come from here: http://metervara.net/cover/1-Confetti/?

  2. Thanks for your comment. Yes of course. But it's smoother with higher CPU & Memory performance and multi device pixel ratio support and high-performance animation rendering based around the Animation Timing Interface.

  3. Is there anyway to stop it?

    I put the whole thing in a function to start it when I want but I can't find a way to stop it after execution.


  4. You can use below code to stop the animation:


    Warm Regards

  5. Thanks for your reply. I tried running cAF(confetti.interval); in firebug console while the animation is running but nothing is happening. I am getting "undefined" upon running cAF(confetti.interval);

  6. I also tried confetti.stop(); but nothing is happening either.

  7. Hi, is there any way to stop the confetti falling after a certain amount of time? I don't want to stop the animation - I want to, after a second or so, allow the final pieces of confetti to fall offscreen without generating any more.

  8. Not working with <meta name="viewport" content="width=device-width, initial-scale=1" />

    Not working with z-index, it overrides every element on the web page, canvas has priority on other elements

    Please fix it! Thanks!

  9. Hi @iprodev , Is there any way to start the confetti from top of viewport, currently it just spreads on the whole screen and start falling.


  10. how can i trigger start and stop, Thanks

  11. you can stop by replacing the id of the canvas => document.getElementById('confetti').setAttribute('id', 'xxx');

  12. Hi, i have a problem with other my website. Namely, i write the code in many html files and the last html page it show me more little confetti. How can i fix it?

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.