Chrome 156 ships a native random() function for CSS
The random() function generates a number directly inside a property value and can share results across elements and properties. Chrome is the first browser to support it.
Chrome 156 reached the stable channel today, 20 October, and brings CSS a native random() function: random(0, 100) resolves to a random number in that range, right inside a property value, with no JavaScript generator and no custom-property trick needed.
The function takes an optional step argument, so random(0, 100, 10) only returns multiples of ten, and it works anywhere a length, angle, percentage, number or integer is expected. By default every random() call resolves independently, but passing a random-key such as element-scoped or property-scoped as the first argument lets several declarations share the same random value instead of each rolling its own.
.dot {
position: absolute;
top: random(0%, 100%);
left: random(0%, 100%);
}Why it matters: scattering, jitter and varied animation delays have mostly needed inline styles generated in JavaScript or a pile of nth-child selectors faking randomness. This replaces that with one line of CSS.
The caveat: random() is not Baseline. Chrome is the first browser to ship it, and Firefox and Safari haven’t committed to a date, so anything that needs to work everywhere still needs a JavaScript fallback for now.