random()
The random() CSS function chooses a random numeric value within a specified range. This allows for dynamic, randomized styling using CSS. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Overview
The random() CSS function chooses a random numeric value within a specified range. This allows for dynamic, randomized styling using CSS. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
random Experimental | | | | 26.2 | | 26.2 |
Syntax
.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.
Related links
Powered by web-features