random() and progress() functions

`random()`: Safari 26.2 (refined in 26.5 with `element-scoped`), Firefox flagged; Chrome in development. `progress()`: Safari 26.0, Firefox 154 flagged, Chrome in development. Not Baseline.

Chrome noEdge noSafari 26.2 / 26.0Firefox flag

`random(min, max, step)` yields a stable random value per page load (or per element with `element-scoped`), for scattered confetti, jittered grids and organic layouts. `progress(value, start, end)` returns 0..1 for a value between two bounds, a building block for fluid interpolation.

CSS

.fx-059 {
  position: relative;
  height: 120px;
  background: #0f172a;
  border-radius: 12px;
  overflow: hidden
}
.fx-059 i {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #facc15;
    left: random(element-scoped,5%,95%);
  top: random(element-scoped,10%,85%);
    scale: random(element-scoped,.5,1.5);
    opacity: progress(random(element-scoped,0,1),0,1)
}

HTML

<div class="fx-059"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>

Fallback: Unsupported browsers place all dots at the initial `left`/`top` (0); provide `:nth-child` offsets as a fallback if needed.

Source: webkit.org/blog/17938/webkit-features-for-safari-26-5/ and https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/154

Prompt

Use `random(element-scoped, min, max)` for per-element organic variation (particle fields, scattered decoration) and `progress(v, a, b)` to normalise a value to 0..1 inside calc(). Safari-only (plus Firefox flags) in 2026-09; provide deterministic `:nth-child` fallbacks for the positions.