New CSS Random Functions: random() and random-item()
Use random() and random-item() to generate random values directly in CSS, eliminating the need for JS or preprocessors.
Test random() and random-item() in your stylesheets to ensure browser support and adjust fallback for older browsers.
Summary
CSS has long been deterministic, which made true randomness impossible without external tools.
The CSS Values and Units Module Level 5 introduces two native functions, random() and random-item(), that generate random numbers between a minimum and maximum or pick a random value from a list, respectively. These functions run entirely in the browser, allowing styles to change on page load, refresh, or mutation without JavaScript or preprocessors. The new syntax aligns with the Rule of Least Power, keeping randomness in the layout layer instead of moving it to imperative code.
Prior work relied on :nth-child patterns, Sass random() at compile time, or server‑side generation, all of which produced static or predictable values. With random() and random-item(), developers can now write truly dynamic CSS that adapts to each visitor. The functions are part of the CSS Values and Units Module Level 5, which is supported in the latest versions of Chrome, Firefox, Safari, and Edge. Using these functions simplifies code and improves maintainability for projects that need subtle variations like backgrounds, colors, or animations.
Key changes
- random() generates a random number between a specified minimum and maximum.
- random-item() selects a random value from a provided list.
- Both functions are part of CSS Values and Units Module Level 5.
- Randomness is computed in the browser, enabling true dynamic styles on load, refresh, or mutation.
- Eliminates the need for JavaScript, preprocessors, or server‑side generation for random values.
- Aligns with the Rule of Least Power by keeping randomness in the layout layer.
- Supported in the latest releases of Chrome, Firefox, Safari, and Edge.
- Simplifies code for background, color, and animation variations.