--- title: Embracing Playful Imperfection With The CSS random()... description: The new CSS random() function generates pseudo-random values directly in stylesheets, without JavaScript or Sass loops. It shipped in Safari and is rolling out... canonical: https://daily.dev/posts/embracing-playful-imperfection-with-the-css-random-function-smashing-magazine-cwvipesbh twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Embracing Playful Imperfection With The CSS random() Function — Smashing Magazine | daily.dev og:description: The new CSS random() function generates pseudo-random values directly in stylesheets, without JavaScript or Sass loops. It shipped in Safari and is rolling out... og:url: https://daily.dev/posts/embracing-playful-imperfection-with-the-css-random-function-smashing-magazine-cwvipesbh og:image: https://api.daily.dev/og/posts/CwvIPeSbH.png og:image:alt: Embracing Playful Imperfection With The CSS random() Function — Smashing Magazine 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. # Embracing Playful Imperfection With The CSS random() Function — Smashing Magazine **[Smashing Magazine](https://daily.dev/sources/smashing)** · 16 min read · 0 upvotes · 1 comments ## Summary The new CSS random() function generates pseudo-random values directly in stylesheets, without JavaScript or Sass loops. It shipped in Safari and is rolling out in Chrome 156, with positive signals from Firefox. Syntax looks like rotate: random(-3deg, 3deg), with an optional step argument for rounding to increments and a caching key (like random(--square-size, 60px, 120px)) to sync multiple properties. A related function, random-item(), picks from a list of tokens but has no browser support yet. Brecht De Ruyte demonstrates it in typography, bounce animations, tilted cards, and scroll-driven card fans, while warning to avoid it in core layouts, body copy, and interactive targets, and to respect prefers-reduced-motion. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How does the CSS random() function work and what's the syntax? The CSS random() function generates a pseudo-random value inside a stylesheet without JavaScript, specified as random(?, , [, by ]?). For example, rotate: random(-3deg, 3deg) picks a random angle, and inline-size: random(20px, 80px, 10px) rounds results to 10px increments. Minimum and maximum values must share the same unit type. _daily.dev surfaces practical CSS breakdowns like this as new spec features land in browsers._ ### What browsers support the CSS random() function? Safari was the first browser to ship support for the CSS random() function, and it is rolling out in Chrome 156, with positive signals from Mozilla suggesting Firefox support on the standards track. Because rollout is still in progress, wrapping usage in @supports (rotate: random(-2deg, 2deg)) is recommended for safe progressive enhancement. _Track browser rollout status like this on daily.dev before shipping new CSS features._ ### What is a CSS random() caching key used for? A caching key makes multiple random() calls on the same element share one computed value, which is useful when two properties need to stay in sync, such as a square tile's width and height. For example, inline-size: random(--square-size, 60px, 120px) and block-size: random(--square-size, 60px, 120px) will resolve to the same random number because they reference the same key. _daily.dev helps developers keep up with CSS spec details like this one before they hit production._ ## Community discussion Top comments from developers on daily.dev. **@diyweb** · 0 upvotes > Keeping random() decorative and out of body copy and interactive targets is the right boundary. One more check is that randomly tilted or sized cards should still be tested for text overflow and tap target size at narrow widths, because a random value can land on the worst case. The prefers-reduced-motion point matters most for the bounce and scroll-driven demos. ## Similar posts on daily.dev - [Experimenting with random\(\) in CSS](https://daily.dev/posts/experimenting-with-random-in-css-ouj2w2eta) · Polypane · 16 upvotes · 6 comments - [Let’s Use the Emergent CSS random\(\) Function in all the Browsers](https://daily.dev/posts/let-s-use-the-emergent-css-random-function-in-all-the-browsers-yi8ggjuka) · CSS-Tricks · 2 upvotes · 0 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), [#accessibility](https://daily.dev/tags/accessibility), [#web-animation](https://daily.dev/tags/web-animation) [View this post on daily.dev](https://daily.dev/posts/embracing-playful-imperfection-with-the-css-random-function-smashing-magazine-cwvipesbh) ```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":"Embracing Playful Imperfection With The CSS random() Function — Smashing Magazine","url":"https://daily.dev/posts/embracing-playful-imperfection-with-the-css-random-function-smashing-magazine-cwvipesbh","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/embracing-playful-imperfection-with-the-css-random-function-smashing-magazine-cwvipesbh"},"datePublished":"2026-10-20T13:12:23.589Z","dateModified":"2026-10-20T13:23:57.611Z","description":"The new CSS random() function generates pseudo-random values directly in stylesheets, without JavaScript or Sass loops. It shipped in Safari and is rolling out...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/f26ee181bcbeb70b5f584df87848a8d4?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/f26ee181bcbeb70b5f584df87848a8d4?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Smashing Magazine","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":"Smashing Magazine","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/smashing","url":"https://daily.dev/sources/smashing"},"commentCount":1,"discussionUrl":"https://daily.dev/posts/embracing-playful-imperfection-with-the-css-random-function-smashing-magazine-cwvipesbh","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"css,accessibility,web-animation","timeRequired":"PT16M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Smashing Magazine","item":"https://daily.dev/sources/smashing"},{"@type":"ListItem","position":3,"name":"Embracing Playful Imperfection With The CSS random() Function — Smashing Magazine"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/embracing-playful-imperfection-with-the-css-random-function-smashing-magazine-cwvipesbh","comment":[{"@type":"Comment","text":"Keeping random() decorative and out of body copy and interactive targets is the right boundary. One more check is that randomly tilted or sized cards should still be tested for text overflow and tap target size at narrow widths, because a random value can land on the worst case. The prefers-reduced-motion point matters most for the bounce and scroll-driven demos.","datePublished":"2026-10-26T18:16:15.715Z","url":"https://daily.dev/posts/CwvIPeSbH#c-65IpjV5U5","author":{"@type":"Person","name":"DiyWeb","url":"https://daily.dev/diyweb","image":"https://media.daily.dev/image/upload/s--dgS6jDeN--/f_auto/v1790879420/avatars/avatar_774zDwMaRTNS1fv5OKStX?_a=BAMAMicg0"}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/embracing-playful-imperfection-with-the-css-random-function-smashing-magazine-cwvipesbh#faq","mainEntity":[{"@type":"Question","name":"How does the CSS random() function work and what's the syntax?","acceptedAnswer":{"@type":"Answer","text":"The CSS random() function generates a pseudo-random value inside a stylesheet without JavaScript, specified as random(\u003crandom-caching-key\u003e?, \u003cmin\u003e, \u003cmax\u003e[, by \u003cstep\u003e]?). For example, rotate: random(-3deg, 3deg) picks a random angle, and inline-size: random(20px, 80px, 10px) rounds results to 10px increments. Minimum and maximum values must share the same unit type. daily.dev surfaces practical CSS breakdowns like this as new spec features land in browsers."}},{"@type":"Question","name":"What browsers support the CSS random() function?","acceptedAnswer":{"@type":"Answer","text":"Safari was the first browser to ship support for the CSS random() function, and it is rolling out in Chrome 156, with positive signals from Mozilla suggesting Firefox support on the standards track. Because rollout is still in progress, wrapping usage in @supports (rotate: random(-2deg, 2deg)) is recommended for safe progressive enhancement. Track browser rollout status like this on daily.dev before shipping new CSS features."}},{"@type":"Question","name":"What is a CSS random() caching key used for?","acceptedAnswer":{"@type":"Answer","text":"A caching key makes multiple random() calls on the same element share one computed value, which is useful when two properties need to stay in sync, such as a square tile's width and height. For example, inline-size: random(--square-size, 60px, 120px) and block-size: random(--square-size, 60px, 120px) will resolve to the same random number because they reference the same key. daily.dev helps developers keep up with CSS spec details like this one before they hit production."}}]} ```