The random() function brings generative randomness to CSS, allowing web authors to generate a random numeric value within a specified range. For example, web authors can use random() to scatter elements randomly within their container: .dot { /* Position each dot randomly */ position: absolute; top: random(0%, 100%); left: random(0%, 100%); } This feature also includes caching controls. By default, each random() function resolves to a new, distinct value. Web authors can override this default by passing a <random-key> value as the function's first argument to control how random values are shared across properties and elements.
The CSS random() function provides a native way to generate random values directly in CSS without relying on JavaScript, reducing code complexity while making it easier for developers to create varied and dynamic designs.
Explainers: https://webkit.org/blog/17285/rolling-the-dice-with-css-random https://css-tricks.com/almanac/functions/r/random