Experimenting with Random() in CSS
CSS's random() function, still in early draft stage, allows generating random numeric values directly in stylesheets. This enables effects like randomized colors, positions, and animations without JavaScript, though browser support is currently limited to experimental builds of Chrome and Firefox.
Background
- CSS random() is a proposed new CSS function that would allow generating random values directly in stylesheets, without needing JavaScript. The idea is being discussed in the CSS Working Group (the official standards body that develops CSS).
- Currently, achieving randomness in CSS requires workarounds: using JavaScript to generate values, or using CSS custom properties with the `@property` rule and Houdini (a set of low-level browser APIs). These approaches are complex or limited.
- The article tests ways to simulate random() today using `@property` and trigonometric functions like `sin()` and `mod()` to create pseudo-random numbers. This is experimental — not a standard feature yet.
- Why it matters: Native random() would let developers create dynamic, varied designs (e.g., random colors, sizes, animations) without JavaScript, reducing code complexity and improving performance. It's part of a broader push to make CSS more powerful as a full programming language for styling.