{"id":6931,"date":"2025-08-25T16:59:02","date_gmt":"2025-08-25T21:59:02","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=6931"},"modified":"2025-08-26T10:34:20","modified_gmt":"2025-08-26T15:34:20","slug":"very-early-playing-with-random-in-css","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/very-early-playing-with-random-in-css\/","title":{"rendered":"Very Early Playing with random() in CSS"},"content":{"rendered":"\n

WebKit\/Safari has rolled out a preview version of random()<\/code> in CSS.<\/a> <\/p>\n\n\n\n

\n

Random functions in programming languages are amazing. You can use them to generate variations, to make things feel spontaneous and fresh. Until now there was no way to create a random number in CSS. Now, the random()<\/code> function is on its way.<\/p>\n<\/blockquote>\n\n\n\n

Upon first play, it’s great! <\/p>\n\n\n\n

This is only<\/em> in Safari Technical Preview<\/a> right now. I’ll post videos below so you can see it, and link to live demos.<\/p>\n\n\n\n

CSS processors like Sass have been able to do this for ages, but it’s not nearly as nice in that context.<\/p>\n\n\n\n

    \n
  1. The random()<\/code> numbers in Sass are only calculated at compile time. So they are only random at the time. Refreshing the page doesn’t mean newly random values.<\/li>\n\n\n\n
  2. Random numbers are usually paired with a loop. So if you want 1,000 randomly placed elements, you need 1,000 :nth-child()<\/code> selectors with a randomly generated value in each, meaning bulky CSS.<\/li>\n<\/ol>\n\n\n\n

    With random()<\/code> in vanilla CSS, no such loops are needed and making the code quite simple and satisfying. <\/p>\n\n\n\n

    I found a 12-year-old Sass demo of mine playing with random()<\/code> that is like this:<\/p>\n\n\n\n

    \"\"
    This<\/a> compiled to over 200 lines of CSS.<\/figcaption><\/figure>\n\n\n\n

    But now it’s just like this: <\/p>\n\n\n\n

    \"\"
    Demo<\/a><\/figcaption><\/figure>\n\n\n\n

    Much of the magic, to me, is how each matching element gets its own random values. So if you had three things like this:<\/p>\n\n\n

    <div<\/span> class<\/span>=\"thing\"<\/span>><\/span><\/div<\/span>><\/span>\n<div<\/span> class<\/span>=\"thing\"<\/span>><\/span><\/div<\/span>><\/span>\n<div<\/span> class<\/span>=\"thing\"<\/span>><\/span><\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    Then this simple CSS could make them all quite different:<\/p>\n\n\n
    .thing<\/span> {\n  position<\/span>: absolute;\n  background<\/span>: red;\n  width<\/span>: 100px<\/span>;\n  height<\/span>: 100px<\/span>;\n  \n  top<\/span>: random<\/span>(10px<\/span>, 200px<\/span>);\n  left<\/span>: random<\/span>(100px<\/span>, 400px<\/span>);\n  \n  background<\/span>: rgb<\/span>(\n    random(0<\/span>, 255<\/span>),\n    random<\/span>(0<\/span>, 255<\/span>),\n    random<\/span>(0<\/span>, 255<\/span>)\n  )\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n\t\t
    \n\t\t\t