CSS random() confetti
A static field of HTML particles gets its color, size, position, drift, rotation, timing, opacity, and shape from typed CSS custom properties. Read the article that accompanies this demo to learn more.
What this page is testing
- Registered custom properties evaluate random values before substitution.
- Element-scoped cache keys keep paired particle values coherent.
- Unsupported browsers receive a static CSS fallback.
- Reduced-motion users keep the composition without continuous animation.
This browser supports the live randomized confetti path. However, current Safari
at does not support the use of
registered custom properties with random().
This browser is showing a deterministic fallback because CSS
random() is not available.