--- title: CSS progress() is now in all major browsers | daily.dev description: The CSS progress() function has now shipped across all major browsers. It maps a value against a lower and upper bound to return a number between 0 and 1,... canonical: https://daily.dev/posts/css-progress-is-now-in-all-major-browsers-dmsl4fj8q twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: CSS progress() is now in all major browsers | daily.dev og:description: The CSS progress() function has now shipped across all major browsers. It maps a value against a lower and upper bound to return a number between 0 and 1,... og:url: https://daily.dev/posts/css-progress-is-now-in-all-major-browsers-dmsl4fj8q og:image: https://api.daily.dev/og/posts/dmsl4Fj8Q.png og:image:alt: CSS progress() is now in all major 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. # CSS progress() is now in all major browsers **[Collections](https://daily.dev/sources/collections)** · 2 min read · 50 upvotes · 8 comments ## Summary The CSS progress() function has now shipped across all major browsers. It maps a value against a lower and upper bound to return a number between 0 and 1, useful for fluid typography and responsive layouts beyond what clamp() offers. Combined with registered custom properties and container style queries, it can express conditional boolean-like logic entirely in CSS without JavaScript. Firefox additionally supports a no-clamp keyword letting values escape the 0-1 range, though this is currently Firefox-only. ## Content The CSS `progress()` function just landed in all major browsers. Here's what it does and why it's more useful than it first appears. ## What it does `progress()` maps a value against a lower and upper bound, returning a number between 0 and 1. Think of it as asking: "how far along is this value between these two points?" The most obvious use cases are fluid typography and responsive layouts - anywhere you'd previously reach for `clamp()` or a linear interpolation hack. But the function gets more interesting when you push it further. ## Boolean-like logic without JavaScript Because `progress()` returns a clamped number, you can combine it with registered custom properties and container style queries to express conditional logic in pure CSS. A practical example: showing a badge once a movie count crosses a certain threshold. No JavaScript comparisons, no loops - just `progress()` doing the heavy lifting. Firefox also supports a `no-clamp` keyword that lets the value go outside the 0-1 range, though that's currently Firefox-only. ## Why this matters A lot of CSS tricks that used to require JavaScript - or at least some creative `calc()` gymnastics - are quietly becoming native. `progress()` is a small function, but it fills a real gap. ## Questions this post answers ### What does the CSS progress() function do? It maps a given value against a lower and upper bound and returns a normalized number between 0 and 1, representing how far along that value is between the two points. It is useful for fluid typography and responsive layouts, replacing many clamp() or manual linear interpolation hacks. It has landed in all major browsers. _Developers adopting new CSS features can track browser support changes like this on daily.dev._ ### Can I use CSS progress() to write conditional logic without JavaScript? Yes, combining progress() with registered custom properties and container style queries lets you express boolean-like conditional logic purely in CSS, such as showing a badge once a count crosses a threshold, without JavaScript comparisons or loops. _Anyone reducing JavaScript in favor of native CSS can follow patterns like this on daily.dev._ ### Does Firefox support a no-clamp option for CSS progress()? Yes, Firefox supports a no-clamp keyword that allows the progress() result to go outside the standard 0-1 range, but this behavior is currently exclusive to Firefox and not part of the shared cross-browser implementation. _Teams testing cross-browser CSS quirks can keep tabs on vendor-specific behavior via daily.dev._ ## Community discussion Top comments from developers on daily.dev. **@johndiddles** · 7 upvotes > CSS keeps getting cooler everyday. But with all the AI slop fast filling the internet, creativity seems to be taking a big hit. We used to see devs paint entire pictures using just CSS. But now that CSS is getting all these cool upgrades, we no longer see much of those creative works. **@springtofigh** · 4 upvotes > How cool CSS has become🔥👌 **@ristotoldsep** · 3 upvotes > CSS keeps taking JavaScript’s jobs and honestly, I support the takeover. **@siddhesh1996** · 0 upvotes > Cant wait to use it in my future projects **@databreach82** · 0 upvotes > The practical examples really helped to see if it was worth using. Can't wait to use this in my projects! > >  ## Similar posts on daily.dev - [Fallbacks for CSS \`progress\(\)\` – Master.dev Blog](https://daily.dev/posts/fallbacks-for-css-progress-master-dev-blog-uogyas7vh) · Frontend Masters · 4 upvotes · 0 comments - [Fluid Typography with progress\(\) – Master.dev Blog](https://daily.dev/posts/fluid-typography-with-progress-master-dev-blog-qhlmfwxbe) · Frontend Masters · 10 upvotes · 1 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css) [View this post on daily.dev](https://daily.dev/posts/css-progress-is-now-in-all-major-browsers-dmsl4fj8q) ```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":"CSS progress() is now in all major browsers","url":"https://daily.dev/posts/css-progress-is-now-in-all-major-browsers-dmsl4fj8q","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/css-progress-is-now-in-all-major-browsers-dmsl4fj8q"},"datePublished":"2026-09-14T17:57:44.437Z","dateModified":"2026-09-14T17:58:21.180Z","description":"The CSS progress() function has now shipped across all major browsers. It maps a value against a lower and upper bound to return a number between 0 and 1,...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/1ba63efaa932185b328852ff045f070d?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/1ba63efaa932185b328852ff045f070d?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Collections","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":"Collections","logo":"https://media.daily.dev/image/upload/s--fk_6ycEi--/f_auto,q_auto/v1780996001/logos/collections?_a=BAMAMiWQ0","url":"https://daily.dev/sources/collections"},"commentCount":8,"discussionUrl":"https://daily.dev/posts/css-progress-is-now-in-all-major-browsers-dmsl4fj8q","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":50},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":8}],"keywords":"webdev,css","timeRequired":"PT2M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Collections","item":"https://daily.dev/sources/collections"},{"@type":"ListItem","position":3,"name":"CSS progress() is now in all major browsers"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/css-progress-is-now-in-all-major-browsers-dmsl4fj8q","comment":[{"@type":"Comment","text":"CSS keeps getting cooler everyday. But with all the AI slop fast filling the internet, creativity seems to be taking a big hit. We used to see devs paint entire pictures using just CSS. But now that CSS is getting all these cool upgrades, we no longer see much of those creative works.","datePublished":"2026-09-15T21:28:27.049Z","url":"https://daily.dev/posts/dmsl4Fj8Q#c-oCURC0JiR","author":{"@type":"Person","name":"Adepelumi John","url":"https://daily.dev/johndiddles","image":"https://lh3.googleusercontent.com/a/ACg8ocIAHXEXqjxtmrl__59VvFeZQxU8Wpw9ppnXvugAFjrGiUU_bA=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":7}},{"@type":"Comment","text":"How cool CSS has become🔥👌","datePublished":"2026-09-15T12:34:37.244Z","url":"https://daily.dev/posts/dmsl4Fj8Q#c-P2hqzhuJA","author":{"@type":"Person","name":"Spring Tofigh","url":"https://daily.dev/springtofigh","image":"https://avatars.githubusercontent.com/u/90114320?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4}},{"@type":"Comment","text":"CSS keeps taking JavaScript’s jobs and honestly, I support the takeover.","datePublished":"2026-09-17T09:13:31.483Z","url":"https://daily.dev/posts/dmsl4Fj8Q#c-4NzUG2OOX","author":{"@type":"Person","name":"Risto Tõldsep","url":"https://daily.dev/ristotoldsep","image":"https://media.daily.dev/image/upload/s--i6RRoxB7--/f_auto,pg_1/v1794383659/avatars/avatar_ryDlbifZ1EuRuh3g51ryC?_a=BAMAMiiw0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"Cant wait to use it in my future projects","datePublished":"2026-09-17T05:22:51.334Z","url":"https://daily.dev/posts/dmsl4Fj8Q#c-dFUyNIJj8","author":{"@type":"Person","name":"Siddhesh","url":"https://daily.dev/siddhesh1996","image":"https://lh3.googleusercontent.com/a/ACg8ocKv7m1b4dJpJLut2B21UYye0e5umRhM2OnnZb_24Z8wlvFk_JCRsQ=s96-c"}},{"@type":"Comment","text":"The practical examples really helped to see if it was worth using. Can’t wait to use this in my projects!","datePublished":"2026-09-17T06:24:41.727Z","url":"https://daily.dev/posts/dmsl4Fj8Q#c-SUYxib8pg","author":{"@type":"Person","name":"data_breach","url":"https://daily.dev/databreach82","image":"https://avatars.githubusercontent.com/u/122239200?v=4"}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/css-progress-is-now-in-all-major-browsers-dmsl4fj8q#faq","mainEntity":[{"@type":"Question","name":"What does the CSS progress() function do?","acceptedAnswer":{"@type":"Answer","text":"It maps a given value against a lower and upper bound and returns a normalized number between 0 and 1, representing how far along that value is between the two points. It is useful for fluid typography and responsive layouts, replacing many clamp() or manual linear interpolation hacks. It has landed in all major browsers. Developers adopting new CSS features can track browser support changes like this on daily.dev."}},{"@type":"Question","name":"Can I use CSS progress() to write conditional logic without JavaScript?","acceptedAnswer":{"@type":"Answer","text":"Yes, combining progress() with registered custom properties and container style queries lets you express boolean-like conditional logic purely in CSS, such as showing a badge once a count crosses a threshold, without JavaScript comparisons or loops. Anyone reducing JavaScript in favor of native CSS can follow patterns like this on daily.dev."}},{"@type":"Question","name":"Does Firefox support a no-clamp option for CSS progress()?","acceptedAnswer":{"@type":"Answer","text":"Yes, Firefox supports a no-clamp keyword that allows the progress() result to go outside the standard 0-1 range, but this behavior is currently exclusive to Firefox and not part of the shared cross-browser implementation. Teams testing cross-browser CSS quirks can keep tabs on vendor-specific behavior via daily.dev."}}]} ```