← All elements
<div class="cf"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>About this animation
Coloured confetti pieces that fly outward and fall, each offset with custom properties and nth-child delays.
How it works
Twelve small pieces start at one point. Each has custom properties for its horizontal and vertical travel and a number that drives its hue through hsl(calc(var(--n) * 30) ...). The keyframes move it outward, rotate it, then drop and fade it, and negative animation delays spread the pieces out in time.
Ways to customise it
- Edit the --x and --y values to widen or narrow the burst.
- Change 30 in the hsl calculation to alter the colour spread.
- Lengthen the duration for a floatier fall.
Good to know
It is decorative only and respects prefers-reduced-motion. Because the pieces are absolutely positioned, give the container overflow: hidden so they do not cause page scrolling.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.