random()

A random value between min and max. The browser’s native random() handles the calls it supports; Reactive CSS runs the rest, and rolls a new value at each event inside a mutation.

Syntax

random(<key>?, <min>, <max>, <step>?)             /* native syntax */random(element-shared?, <min>, <max>, by <step>?)  /* Reactive CSS syntax */

registry syntax: random([element-shared,] min, max [, by step])

Parameters

min, maxnumbers, dimensions or percentages of one unitrequired

A unitless 0 adopts the other unit. Mixed units, var() or calc() are allowed without a step.

step<value> or by <value>optional

Round to multiples of the step. A plain third value is the native syntax; by <step> is the earlier draft’s, which only Reactive CSS reads.

keyauto, --name, element-scoped, property-scoped, fixed <n>, or element-sharedoptional

The native keys are left to the browser. element-shared is Reactive CSS’s own: one value for all elements, never re-rolled.

Return value

A value of the input type. With mixed units: calc(min + (max - min) * r).

Example

.star {  translate: random(0px, 400px) random(0px, 200px);  rotate: random(-30deg, 30deg, 15deg);}.die { --face: state(1); }.die:on(click) { --face: set(random(1, 6, 1)); }

Behavior

• Native first. A top-level call that the browser supports as written is left to it, when a probe confirms that it gives per-element values, whatever its units or step. Chromium 156 and WebKit 27.2 implement the 2026 CSS Values 5 draft this way; where the browser cannot evaluate a call, Reactive CSS’s polyfill does.
• Native-only keys (--name, element-scoped, property-scoped, fixed) are never taken over. A browser that supports them handles them; without support, one diagnostic is given.
• Reactive CSS runs by <step> and element-shared, calls inside live() or on(), calls inside mutations, and every call the browser cannot evaluate. The polyfill follows the 2026 draft for the plain step: a zero or negative step is ignored, and max < min gives min.
• In a mutation, --face: set(random(1, 6, 1)) rolls a new value at each event. Both step forms work there.
• Custom properties differ. A natively handled --r: random(…) keeps the call as text, so each var(--r) user rolls its own value. The polyfill gives one value per declaring element, which descendants inherit.
• Static unless inside live(), on() or a mutation.

Supported contexts

• Any value, and the expression of an :on() mutation.

Limitations

• Native support differs between browsers, so a natively handled custom property can behave differently from the polyfill, as described above.

native equivalent · random() (CSS Values 5) when per-element semantics are confirmed

Examples

• Random colors · API examples, runs the real runtime
• Live values · API examples, runs the real runtime

Related