OneTaskBy Tim King · Updated
Confetti Generator
Canvas Confetti Fired From a Button, With Your Colours, Piece Count and Gravity
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Confetti Generator works
A confetti generator builds a burst of colourful paper pieces that shoots up from a button and drifts down. Pick your colours, the number of pieces and the gravity, click the button in the preview, then copy the code.
Confetti is a quick way to reward a visitor after a sign-up, a purchase or a finished quiz. It works best once, at the moment of success, rather than looping in the background.
How the confetti generator works
A <canvas> sits over the section and ignores the pointer. A click adds a set of pieces at the
button, each with a random angle, speed and spin. Every frame, gravity pulls the pieces down, air
drag slows them sideways, and each piece squashes as it flips so it looks like paper turning over.
Pieces are removed once they fall out of view, and the animation stops when none are left.
Trigger it from your own code
The burst(x, y) function can be called from anywhere inside the script, for example after a
form submits successfully. Pass the point, in pixels from the top left of the section, where the
confetti should start.
FAQ
Do I need a confetti library?
No. The whole effect is around sixty lines of plain JavaScript and a canvas, so there is nothing to install and nothing to load from another site. Libraries add more shapes and presets, but this covers the classic burst.
What happens for visitors who prefer reduced motion?
The script checks the prefers-reduced-motion setting, and if it is on the button does not
launch any confetti. The button still works, so pair it with a clear message confirming success.
Can I fire confetti across the whole screen?
Yes. Make the canvas position: fixed with inset: 0 so it covers the viewport, size it to the
window instead of the section, and call burst with the button position from
getBoundingClientRect() directly.
Why does the confetti stop animating when it is finished?
The loop only runs while there are pieces on screen. Once the last one falls out of view the animation frame stops, so the page uses no processor time until the next click.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Cursor Trail
Add a fading dot trail that follows the mouse.
Hero Section Builder
Landing page hero sections with fluid headline and buttons.
Animated Counter
Make a number count-up animation and copy the code.
Text Animation
Animate a headline letter by letter and copy the CSS.
Glass Button Builder
Frosted glass buttons with glow, lift and a shine sweep.