--- title: Let’s Use the Emergent CSS random() Function in all the... description: Safari became the first browser to ship the CSS random() function in late 2025, but Chrome and Firefox support remains unclear, with only early signs of... canonical: https://daily.dev/posts/let-s-use-the-emergent-css-random-function-in-all-the-browsers-yi8ggjuka twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Let’s Use the Emergent CSS random() Function in all the Browsers | daily.dev og:description: Safari became the first browser to ship the CSS random() function in late 2025, but Chrome and Firefox support remains unclear, with only early signs of... og:url: https://daily.dev/posts/let-s-use-the-emergent-css-random-function-in-all-the-browsers-yi8ggjuka og:image: https://api.daily.dev/og/posts/yi8GgjuKa.png og:image:alt: Let’s Use the Emergent CSS random() Function in all the Browsers og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Let’s Use the Emergent CSS random() Function in all the Browsers **[CSS-Tricks](https://daily.dev/sources/css_tricks)** · 19 min read · 2 upvotes · 0 comments ## Summary Safari became the first browser to ship the CSS random() function in late 2025, but Chrome and Firefox support remains unclear, with only early signs of implementation work. The author built an open-source JavaScript polyfill (css-random-polyfill) that lets developers write native random() CSS syntax today and have it work across browsers, using intermediate custom properties prefixed with --random. The polyfill wraps the @csstools/css-calc library to interpret random() expressions read from computed styles via JavaScript, avoiding common CSS polyfill pitfalls like stylesheet rewriting. Several demos are walked through, including a random starfield, colored grid cells, a wheel of fortune, and a Chromium-only experiment simulating the unimplemented random-item() function using CSS custom functions and inline conditionals. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### Which browser was first to support the CSS random() function? Safari became the first browser to support the CSS random() spec, shipping it in late 2025 as part of an update focused on solving common UI use cases with HTML and CSS alone, reducing reliance on JavaScript or third-party frameworks. Chrome and Firefox showed signs of working on implementations, but no timeline existed for when random() would land outside Safari, even behind a flag. _developers tracking cross-browser CSS feature rollout can follow updates like this on daily.dev._ ### How can I use the CSS random() function in Chrome and Firefox before it's natively supported? A JavaScript polyfill called css-random-polyfill lets random() work in Chrome and Firefox by detecting lack of native support, then resolving custom properties prefixed with --random using the @csstools/css-calc library. Elements needing polyfilling get a randomized marker class; the script reads computed style values, interprets the random() expressions, and applies resolved values as inline styles. _teams evaluating CSS polyfill strategies can compare approaches like this via daily.dev._ ### Can I mix units like turn and deg inside a single CSS random() function call? Yes, mixing units is supported as long as the values are resolvable to the same overall data type, similar to how calc() adds values with different units using CSS typed arithmetic. For example, random(2turn, 10turn, 20deg) is valid because turn and deg both belong to the angle data type, even though the step interval uses a different unit than the min and max. _developers experimenting with CSS random() syntax quirks can dig into details like this on daily.dev._ ## Similar posts on daily.dev - [Experimenting with random\(\) in CSS](https://daily.dev/posts/experimenting-with-random-in-css-ouj2w2eta) · Polypane · 15 upvotes · 6 comments - [More CSS random\(\) Learning Through Experiments – Frontend Masters Blog](https://daily.dev/posts/more-css-random-learning-through-experiments-frontend-masters-blog-74bldwjii) · Frontend Masters · 4 upvotes · 0 comments - [CSS math-random\(\) in Production: Native Randomness Without JavaScript](https://daily.dev/posts/css-math-random-in-production-native-randomness-without-javascript-g9weud1hs) · SitePoint · 16 upvotes · 0 comments - [The Importance of Native Randomness in CSS](https://daily.dev/posts/the-importance-of-native-randomness-in-css-kfff3kphh) · CSS-Tricks · 98 upvotes · 19 comments --- Tags: [#css](https://daily.dev/tags/css), [#safari](https://daily.dev/tags/safari) [View this post on daily.dev](https://daily.dev/posts/let-s-use-the-emergent-css-random-function-in-all-the-browsers-yi8ggjuka) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Let’s Use the Emergent CSS random() Function in all the Browsers","url":"https://daily.dev/posts/let-s-use-the-emergent-css-random-function-in-all-the-browsers-yi8ggjuka","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/let-s-use-the-emergent-css-random-function-in-all-the-browsers-yi8ggjuka"},"datePublished":"2026-08-31T15:16:43.642Z","dateModified":"2026-09-13T19:59:16.312Z","description":"Safari became the first browser to ship the CSS random() function in late 2025, but Chrome and Firefox support remains unclear, with only early signs of...","image":"https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/08/random-stars-shuffle.webp","thumbnailUrl":"https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/08/random-stars-shuffle.webp","isAccessibleForFree":true,"articleSection":"CSS-Tricks","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"CSS-Tricks","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/css_tricks","url":"https://daily.dev/sources/css_tricks"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/let-s-use-the-emergent-css-random-function-in-all-the-browsers-yi8ggjuka","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"css,safari","timeRequired":"PT19M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"CSS-Tricks","item":"https://daily.dev/sources/css_tricks"},{"@type":"ListItem","position":3,"name":"Let’s Use the Emergent CSS random() Function in all the Browsers"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/let-s-use-the-emergent-css-random-function-in-all-the-browsers-yi8ggjuka#faq","mainEntity":[{"@type":"Question","name":"Which browser was first to support the CSS random() function?","acceptedAnswer":{"@type":"Answer","text":"Safari became the first browser to support the CSS random() spec, shipping it in late 2025 as part of an update focused on solving common UI use cases with HTML and CSS alone, reducing reliance on JavaScript or third-party frameworks. Chrome and Firefox showed signs of working on implementations, but no timeline existed for when random() would land outside Safari, even behind a flag. developers tracking cross-browser CSS feature rollout can follow updates like this on daily.dev."}},{"@type":"Question","name":"How can I use the CSS random() function in Chrome and Firefox before it's natively supported?","acceptedAnswer":{"@type":"Answer","text":"A JavaScript polyfill called css-random-polyfill lets random() work in Chrome and Firefox by detecting lack of native support, then resolving custom properties prefixed with --random using the @csstools/css-calc library. Elements needing polyfilling get a randomized marker class; the script reads computed style values, interprets the random() expressions, and applies resolved values as inline styles. teams evaluating CSS polyfill strategies can compare approaches like this via daily.dev."}},{"@type":"Question","name":"Can I mix units like turn and deg inside a single CSS random() function call?","acceptedAnswer":{"@type":"Answer","text":"Yes, mixing units is supported as long as the values are resolvable to the same overall data type, similar to how calc() adds values with different units using CSS typed arithmetic. For example, random(2turn, 10turn, 20deg) is valid because turn and deg both belong to the angle data type, even though the step interval uses a different unit than the min and max. developers experimenting with CSS random() syntax quirks can dig into details like this on daily.dev."}}]} ```