random()
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The random() CSS function generates a random value within a specified range, optionally limiting the possible values to step size intervals between those limits. It can be used when specifying a <length>, <frequency>, <angle>, <time>, <resolution>, <percentage>, <number>, or <integer> within a property value.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
random Experimental | | | | 26.2 | | 26.2 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.particle {
left: random(0%, 100%);
top: random(0%, 100%);
animation-delay: random(0s, 2s);
}Live demo
Use cases
-
Use random()
Use random() when the default CSS behavior is not expressive enough for the component or layout you are building.
-
Handle edge cases
Apply random() to solve a specific styling constraint without introducing broader layout or behavior changes.
Cautions
- Test random() in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
- Plan a fallback or acceptable degradation path when support is still limited.
Accessibility
- Confirm that using random() does not make content harder to perceive, understand, or operate in assistive contexts.