Rolling the dice with CSS random()
11 comments
·August 21, 2025demurgos
twiss
Spec: https://www.w3.org/TR/css-values-5/#randomness
WPT test results: https://wpt.fyi/results/css/css-values?label=master&label=ex...
Only Safari supports it for now, it seems.
Tepix
Related: Animated starfield in pure CSS
gherkinnn
Nice. Currently I have to set CSS custom properties with JS to achieve the same effect.
Wonderful to see how CSS gets a usable random function before JS does.
noman-land
Maybe "usable" is your qualifier but what's wrong with Math.random()?
akdev1l
To generate random number in a specific range you need to do something I always forget and need to google.
Math.floor(Math.random() * (max - min + 1)) + min;
The CSS function would be random(min, max)
Also the CSS function seems to take a number of steps, it is not immediately obvious to me how to do that with Math.random()
tsujp
JS also has Crypto.getRandomValues()
kachapopopow
I yern for the day we can have react-type pages without any javascript. Keep chugging webkit I believe in you.
jvdvegt
Nice but... no dice!
hannob
Having seen too many "this randomness function was never meant to be used for security, but people use it for security anyway" vulnerabilities in the past:
Can we PLEASEPLEASEPLEASE have this secure by default from the beginning?
1718627440
Security in the Stylesheet? Come on, you need to set boundaries for expectable use.
Where is the spec? I can't find an entry on MDN.
Is there a way to get reproducibility? In the same browser or across browsers? Even if it's not the default mode.