CSS math-random() in Production: Native Randomness Without JavaScript

CSS is gaining a native random() function (CSS Values and Units Level 5) that enables per-element randomness evaluated by the rendering engine without JavaScript. As of mid-2025, no stable browser ships it yet, but the spec is mature enough to build against using progressive enhancement. The guide covers the full syntax including per-element vs. named caching identifiers, practical use cases (generative backgrounds, staggered animations, non-uniform grid layouts), React integration patterns that avoid hydration mismatches, SSR fallback strategies using custom properties, performance considerations, accessibility requirements including prefers-reduced-motion handling, and a production checklist. The recommended approach is to gate all random() usage behind @supports blocks with JavaScript fallbacks injecting CSS custom properties for unsupported browsers.