# CSS random()

DevFeed: [CSS random()](<https://devfeed.tech/articles/css-random-20774.md>)

Original publisher: [Read original article](<https://erikrunyon.com/2025/10/css-random/>)

Author: Erik Runyon

Published: 2025-10-08T00:00:00Z

Content type: article

Language: en

Sources: [Erik Runyon](<https://devfeed.tech/sources/erik-runyon.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [WebKit](<https://devfeed.tech/topics/webkit.md>), [Front end](<https://devfeed.tech/topics/frontend.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>)

Tags: [css](<https://devfeed.tech/tags/css.md>), [frontend](<https://devfeed.tech/tags/frontend.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [safari](<https://devfeed.tech/tags/safari.md>), [web-development](<https://devfeed.tech/tags/web-development.md>)

## AI overview

The article examines Safari's non-standard CSS random() function, describing its random(min, max, step) syntax and current limitations. It explains that the function supports numeric and color contexts but not selectors or string values, and discusses possible uses such as random dimensions, collection items, images, and displayed random numbers.

## Source excerpt

Safari recently implemented a non-standard (yet?) CSS random() function (currently only in WebKit, and not yet part of any CSS specification). Since many recent CSS features are directly aimed at replacing common JavaScript functionality, I expected this function to do the same. While it has some neat use cases, it doesn't cover most of the scenarios where I currently use JavaScript's Math.random(). What it does The basic format of the function follows the pattern "random(min, max, step)". For instance, if you want to assign an element a random height between 50px and 200px, you would use "height: random(50px, 200px)". You can also include a "step" value like so "height: random(50px, 200px, 50px)" where the values will always be a multiple of 50. You can see more examples on the WebKit post "Rolling the Dice with CSS random()" and Frontend Masters "Very Early Playing with random() in CSS". What it doesn't Currently, random() can only be used in numeric or color contexts -- not in selectors or string values like URLs or text content. I have two primary use cases, and one just for fun. All three are marked-up as I would expect to use them if they were supported in the CodePen below. Random items from a collection A common pattern on many Notre Dame sites would be to show a random item from a collection. These could be content such as faculty spotlights, recent publications, or student profiles. We always know how many we're choosing from, and they're always contained to a specific section. So being able to use CSS to show a random child using ":nth-child" would be fantastic. Random images Less common is showing random images. This could be in a feature area on the homepage, or even a decorative background image. This would require the ability to concatenate a string with the random number. Random numbers A "just for fun" feature would be displaying the value from the random() function. My initial thought would be a CSS only dice roller. The demo in the pen would requir