--- title: 5 Useful CSS functions using the new @function rule description: CSS custom functions using the new @function rule have landed in Chrome 139, enabling developers to write reusable logic that accepts arguments and returns... canonical: https://daily.dev/posts/5-useful-css-functions-using-the-new-function-rule-ijvkvcagn twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: 5 Useful CSS functions using the new @function rule | daily.dev og:description: CSS custom functions using the new @function rule have landed in Chrome 139, enabling developers to write reusable logic that accepts arguments and returns... og:url: https://daily.dev/posts/5-useful-css-functions-using-the-new-function-rule-ijvkvcagn og:image: https://api.daily.dev/og/posts/IJVKvcAgN.png og:image:alt: 5 Useful CSS functions using the new @function rule 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. # 5 Useful CSS functions using the new @function rule **[Una Kravets](https://daily.dev/sources/una)** · 8 min read · 20 upvotes · 3 comments ## Summary CSS custom functions using the new @function rule have landed in Chrome 139, enabling developers to write reusable logic that accepts arguments and returns computed values. The article demonstrates five practical examples: a negation function for inverting values, an opacity function for creating transparent color variants, a fluid typography function that scales text responsively, a conditional border radius function that removes rounded corners near viewport edges, and a layout sidebar function for responsive grid layouts. These functions make CSS more organized and dynamic, similar to utility functions in JavaScript, and represent a significant step toward more powerful CSS capabilities with upcoming @mixin and @apply rules. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@noricode** · 0 upvotes > only good use for these is to lighten or darken a color **@stephenf** · 0 upvotes > This is very cool, nested media queries within a function could potentially change how we write responsive CSS **@yaireo** · 0 upvotes > https://yaireo.github.io/css-utility-functions --- Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css), [#ui-design](https://daily.dev/tags/ui-design), [#google-chrome](https://daily.dev/tags/google-chrome) [View this post on daily.dev](https://daily.dev/posts/5-useful-css-functions-using-the-new-function-rule-ijvkvcagn) ```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":"5 Useful CSS functions using the new @function rule","url":"https://daily.dev/posts/5-useful-css-functions-using-the-new-function-rule-ijvkvcagn","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/5-useful-css-functions-using-the-new-function-rule-ijvkvcagn"},"datePublished":"2025-08-13T18:41:19.951Z","dateModified":"2025-08-13T18:41:41.131Z","description":"CSS custom functions using the new @function rule have landed in Chrome 139, enabling developers to write reusable logic that accepts arguments and returns...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/51f35c1d13bef062b74d3aee4001ed9d?_a=AQAEulh","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/51f35c1d13bef062b74d3aee4001ed9d?_a=AQAEulh","isAccessibleForFree":true,"articleSection":"Una Kravets","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":"Una Kravets","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/7f36e43efe8542e68e3f3d20328ee8e7","url":"https://daily.dev/sources/una"},"commentCount":3,"discussionUrl":"https://daily.dev/posts/5-useful-css-functions-using-the-new-function-rule-ijvkvcagn","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":20},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":3}],"keywords":"webdev,css,ui-design,google-chrome","timeRequired":"PT8M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Una Kravets","item":"https://daily.dev/sources/una"},{"@type":"ListItem","position":3,"name":"5 Useful CSS functions using the new @function rule"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/5-useful-css-functions-using-the-new-function-rule-ijvkvcagn","comment":[{"@type":"Comment","text":"only good use for these is to lighten or darken a color","datePublished":"2025-08-26T18:17:36.144Z","url":"https://daily.dev/posts/IJVKvcAgN#c-jOXzdGuWU","author":{"@type":"Person","name":"noricode","url":"https://daily.dev/noricode","image":"https://media.daily.dev/image/upload/v1672934357/avatars/avatar_v9I0Ty3qOPTDx9IvWetC0.jpg"}},{"@type":"Comment","text":"This is very cool, nested media queries within a function could potentially change how we write responsive CSS","datePublished":"2025-08-28T09:35:05.986Z","url":"https://daily.dev/posts/IJVKvcAgN#c-Q0gVXB6Y1","author":{"@type":"Person","name":"Stephen Fray","url":"https://daily.dev/stephenf","image":"https://lh3.googleusercontent.com/a/ACg8ocLxXDZwCZhjCDSHNfLtaPdijyOpYErk4bl-6wUknS55qatJOQ=s96-c"}},{"@type":"Comment","text":"https://yaireo.github.io/css-utility-functions","datePublished":"2026-01-07T07:03:39.966Z","url":"https://daily.dev/posts/IJVKvcAgN#c-NBdm6rHUA","author":{"@type":"Person","name":"Yair Even Or","url":"https://daily.dev/yaireo","image":"https://avatars.githubusercontent.com/u/845031?v=4"}}]} ```