DEV Community


Ever thought of random numbers in CSS?

sergeyioffe profile image Sergey Ioffe ・1 min read

New rand() function in CSS3 like math.rand() in JavaScript would be so good. There's rand with Sass, but it generates only static values. And there is an option of random numbers for CSS using JavaScript snippets. It isn't so cool and requires code. Definitely rand() in CSS3 is highly demanded, e.g. as calc().

Discussion (3)

Editor guide
afif profile image
Temani Afif .. it will come one day
Maybe you don't know it but we already have a lot of Math in CSS in addition to calc()
and this one

moopet profile image
Ben Sinclair

Can you think of an example of when it would be useful?

sergeyioffe profile image
Sergey Ioffe Author

It's e.g. when create a class for a design element that is likely to have varied sizes like a dashboard with sticky notes that aren't all the same size.
.random { width: rand(Npx,Mpx,t) } N=min, M=max, t=level (step) of randomization, etc.
Each time the page loads, the user has slightly another look.