CSS random() in Chrome 156 Is for Texture, Not Chaos

Chrome 156 added the CSS random() function, and Firefox has it in Technology Preview. It returns a random number between a minimum and a maximum, with an optional step, so you can write the variation straight into your stylesheet.

Our view is that it earns its place for texture. Tiny differences in rotation across a row of cards, slightly varied animation delays, or hand-placed looking spacing in a gallery all make a layout feel less mechanical, with no JavaScript.

The detail to remember is the random key. By default, every call gives a different value. If you need one value shared across several properties or elements, pass a random key as the first argument. Without it, a card's shadow and its rotation will not agree with each other.

Keep the range small. A rotation of plus or minus one degree reads as charm, and ten degrees reads as a bug. Use steps to keep values tidy.

Because support is not yet universal, treat it as an enhancement. A layout that looks fine with no variation will look better with it, and nobody is worse off if it is ignored.