Experimenting with Native random() in CSS: From Theory to Real Use Cases 🎲
Practical CSS random() examples: bokeh, northern lights, cherry blossom petals, a stack of photos, and random poetry.
Not long ago, I briefly mentioned on the channel that the CSS specification had gained a random() function. Now it’s time to see what it can do in real-world conditions. Kilian Valkhof published an excellent breakdown of practical use cases on the Polypane blog. This tool finally frees us from having to generate random numbers through JS or pre-rendered CSS variables in preprocessors.
How it works, in a nutshell: The function takes minimum and maximum values, plus an optional rounding step. But the most interesting part is the element-scoped keyword, called per-element in some drafts. It guarantees that each DOM element gets its own unique pseudorandom value that stays stable across rerenders.
Some interesting things implemented entirely in CSS:
- Bokeh and northern lights: Generating random blur, positions, and sizes for hundreds of background circles. Without a single line of JS, you get deep, lively, unique generative art.
- Falling cherry blossom petals: Dynamic animations where
random()gives each petal a unique falling speed, rotation angle, and delay (animation-delay). - Realistic chaos: An interactive stack of draggable photos. On initialization, each card gets a small random tilt (
transform: rotate), creating the effect of casually tossed snapshots. - Random poetry combined with
if(): Probably the most hacky use case. The author combinedrandom()with the new conditional functionif()to randomly insert different words into text blocks.
What about support? The technology is hot and still experimental. The feature is already available behind flags in Safari 26.2+ and Chromium 148+, but the direction of the web platform is clear: CSS continues aggressively taking work away from runtime scripts when it comes to purely visual effects.
Read the article and get lost in the demos
Do you already know where you could use random in your project? Share your ideas👇