CSS random()

Description

The random() function is a math function that represents a random value between a minimum and maximum value, drawn from a uniform distribution, optionally limiting the possible values to a step between those limits

left: random(10%, 20%);
left: random(10%, 20%, 5%);

Specification

https://drafts.csswg.org/css-values-5/#random

web-feature

random-function

Test Links

https://wpt.fyi/results/?label=experimental&label=master&aligned&q=feature%3Arandom-function

Additional Signals

developer signal (16 votes)
https://github.com/web-platform-dx/developer-signals/issues/514

caniuse:
https://caniuse.com/?search=random%28%29

mdn:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/random

csswg:
https://github.com/w3c/csswg-drafts/issues?q=is%3Aissue%20state%3Aopen%20%22random()%22
still a few open issues. some specific to do with random() other about interaction with random-item(), @function

chrome:
https://issues.chromium.org/issues/413385732 (17 votes)

no Chrome platform status stats listing yet

Safari:
already in stable 26.2
https://webkit.org/blog/17640/webkit-features-for-safari-26-2/#css-calc-functions
https://webkit.org/blog/17285/rolling-the-dice-with-css-random/
already moving on to random-item()

Firefox:
https://bugzilla.mozilla.org/show_bug.cgi?id=1836588 (3 votes)
https://github.com/mozilla/standards-positions/issues/809 (positive)

Firefox now has a nightly flagged implementation:
https://bugzilla.mozilla.org/show_bug.cgi?id=2071165

coding2GO: CSS Can Finally Be Random
https://www.youtube.com/watch?v=Uy3xsfAD8s0

polyfill:
https://www.npmjs.com/package/css-random-polyfill

This issue is a CSS random() interoperability investigation rather than a concrete file-level task. Start with the CSS Values 5 random() section and the linked WPT results, then review the open CSSWG and browser issues. Done is not defined in the report, so confirm the expected Interop change before coding.