Chrome 156 brings random() to CSS — Safari already has it, and step is not the same as rounding
Chrome 156, in beta now and scheduled for stable on October 20, adds the CSS random() function: a math function that resolves to a random value between a minimum and a maximum. Safari has shipped it since 26.2 in December 2025; Firefox has it only in its Nightly builds, according to MDN’s compatibility data on October 14.
The syntax
The CSS Values and Units Level 5 draft defines it as random(key?, min, max, step?). Both limits are inclusive, and if the maximum is smaller than the minimum it behaves as the minimum. A step limits results to the minimum plus whole multiples of the step, so random(100px, 300px, 50px) can only be 100, 150, 200, 250 or 300px. The arguments must share a type: lengths with lengths, times with times.
The key decides what is shared
The optional first argument controls which random() calls share a value. The draft’s own example gives several boxes width and height of random(100px, 200px). With no key, every property on every element gets its own value, so you get a set of different rectangles. A named key such as --size gives every call that uses it the same value: identical squares. element-scoped shares one value across an element’s properties but not between elements (different squares), and property-scoped shares per property across elements (identical rectangles). MDN lists named keys and the step argument for both Chrome 156 and Safari 26.2; a per-element keyword, listed under its earlier name element-shared, is Safari-only so far.
Step is not the same as rounding
The draft warns that random(100px, 200px, 50px) and round(random(100px, 200px), 50px) are not the same. We simulated both 100,000 times, exactly as the draft defines them. The stepped version gave 100px, 150px and 200px about a third of the time each (33.4%, 33.3% and 33.3%). Rounding a continuous value gave 150px half the time (49.8%) and each end about a quarter (24.8% and 25.4%), because only a half-width slice at each end rounds to it. Use the step argument when the options should be equally likely.
A fallback for Firefox
In a browser without random() the declaration is invalid and dropped, so a value written before it stays in force: in our Chromium 141 test, width: 150px followed by width: random(100px, 200px) computed to 150px. When the random version changes the layout more, gate it with @supports:
When not to use it
random() is for decoration: scattered dots, varied animation delays, confetti. Anything people need to find in the same place twice, or anything screenshots and visual regression tests compare, is better served by values picked once and written into the stylesheet. Our Random Number Generator does that in bulk, with a minimum, a maximum and whole-number or decimal output.