v155 · css · values

CSS random() function

Chrome 155 brings generative randomness into CSS itself. random(0%, 100%) resolves to a value in the range, per element, with no JavaScript writing inline styles. It also comes with caching controls, because "a new value every time" is the right default and almost never what you want for two properties that should agree.

concepts

  1. Scatter field

    The canonical use: position, size and rotate a field of elements from one rule. Change the count and the ranges and watch the whole field regenerate — and compare the stylesheet against the JavaScript you would otherwise write.

  2. Caching controls

    By default every random() resolves independently, so two properties that should share a value do not. The caching keyword is how you tie them together — per-element, a shared dashed-ident, or fixed — and this shows what each one does to the same layout.

  3. Organic UI

    Randomness used with restraint: a pinboard where every card gets a small unrepeatable tilt and offset. Includes the same effect built the old way with inline styles, so you can compare what the page has to ship.

why it shipped

Scattering, jitter, staggered delays and hand-drawn imperfection are presentational, but until now they needed JavaScript: generate a number, write an inline style or a custom property, per element, at load and on every insertion. That couples a visual effect to script execution, breaks with static rendering, and means the effect is missing until the JavaScript runs.

random() is a value function, so it resolves during style computation like any other. The interesting design decision is the default: each occurrence resolves separately, which is surprising until you consider the alternative — a single shared value would make random() useless for scattering, the case it exists for. Sharing is opt-in, through the caching argument.

the API

/* A new value per element, per property. */
.dot {
  position: absolute;
  top: random(0%, 100%);
  left: random(0%, 100%);
}

/* Both properties share one value per element. */
.dot {
  width: random(--size, 8px, 40px);
  height: random(--size, 8px, 40px);
}

/* A step, so the values land on a grid. */
.dot { top: random(0%, 100%, by 5%); }

Every demo here feature-detects with CSS.supports() and falls back to the JavaScript approach when random() is missing, labelling clearly which path is running — so on a pre-155 build you see the workaround this feature replaces.

references