<!-- mobian-agent-page publisher="dailydev" canonical="https://daily.dev/posts/creating-custom-functions-in-css-using-function-o2mzl5cof" -->

---
title: Creating Custom Functions in CSS using @function | daily.dev
description: CSS now supports user-defined functions via the @function at-rule, extending the existing toolkit of built-in functions like calc(), min(), max(), and clamp()....
canonical: https://daily.dev/posts/creating-custom-functions-in-css-using-function-o2mzl5cof
twitter:card: summary_large_image
twitter:site: @dailydotdev
og:type: website
og:site_name: daily.dev
og:title: Creating Custom Functions in CSS using @function | daily.dev
og:description: CSS now supports user-defined functions via the @function at-rule, extending the existing toolkit of built-in functions like calc(), min(), max(), and clamp()....
og:url: https://daily.dev/posts/creating-custom-functions-in-css-using-function-o2mzl5cof
og:image: https://api.daily.dev/og/posts/O2mZL5cof.png
og:image:alt: Creating Custom Functions in CSS using @function
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.

# Creating Custom Functions in CSS using @function

**[Saleh Mubashar](https://daily.dev/sources/n1nvchoplsc934dnbf4hc)** · [@saleh28](https://daily.dev/saleh28) · 4 min read · 30 upvotes · 7 comments

## Summary

CSS now supports user-defined functions via the @function at-rule, extending the existing toolkit of built-in functions like calc(), min(), max(), and clamp(). Developers can define custom functions, pass values into them, and return results usable anywhere in their styles, enabling reusable style logic without preprocessors.

## Content

CSS already has plenty of useful functions, like `calc()`, `min()`, `max()`, and `clamp()`. They let you build more flexible styles without repeating the same logic.

CSS custom functions let you take this idea a little further. The `@function` at-rule lets you define your own functions, pass them values, and return a result that you can use in your styles.

> [Read the complete article.](https://salehmubashar.com/blog/css-functions)

---

## Syntax

Before we build anything, let's quickly look at the basic syntax:

```
@function --function-name(--param) {
  result: ...;
}
```

The function name and parameter both start with `--`. The parameter is the value you pass into the function, while `result` defines what the function returns.

Parameters can also have a type and a default value:

```
@function --function-name(
  --param <type>: default-value
) returns <type> {
  result: ...;
}
```

We'll get to types and default values later. For now, that's all you need to know.

## A very simple function

Let's start with a small function that doubles a value:

```
@function --double(--value) {
  result: calc(var(--value) * 2);
}
```

The function is called `--double()` and takes one parameter, `--value`. The `result` descriptor defines the value returned by the function.

You can then use it anywhere a CSS value is expected:

```
.box {
  width: --double(100px);
}
```

Here, `--double(100px)` evaluates to `200px`.

You can do the same thing with other bits of CSS logic. For example, you can create a function that halves a value:

```
@function --half(--value) {
  result: calc(var(--value) / 2);
}
```

Both functions follow the same basic pattern: you pass in a value, the function does something with it, and you get a value back.

You can view the interactive demo in the [original article](https://salehmubashar.com/blog/css-functions#A-very-simple-function) on my site.

Try changing the input value and switching between `--double()` and `--half()`. The playground also includes a `--limit()` function, which uses `clamp()` to keep the result between `40px` and `160px`.

## But why use a custom function?

You might be wondering why you need this when CSS already has `calc()` and custom properties.

That's a fair question. For simple calculations, you probably don't need a custom function. The useful part is being able to package a piece of CSS logic and reuse it without repeating the implementation.

For example, consider a design that uses a base spacing value and regularly needs a larger version of that value.

You can view the interactive demo in the [original article](https://salehmubashar.com/blog/css-functions#But-why-use-a-custom-function?) on my site.

Instead of writing the same calculation everywhere, you can put it inside a function and call that function wherever you need it.

This becomes more useful as the logic gets a little more involved.

## Passing values into a function

Custom functions can accept multiple parameters, so you can pass different inputs to the same function.

If you've ever tried to add an alpha channel to an existing hex code in pure CSS, you know it used to be a headache. Now, we can write a single function that uses relative color syntax to handle it for us:

```
@function --transparent(--color, --alpha) {
  result: oklch(from var(--color) l c h / var(--alpha));
}
```

Now, instead of manually defining new hex codes or rgba() values every time we want a see-through background, we just pass our base color and the desired alpha value to the function.

Here is a simple demo showing it in action:

[https://codepen.io/editor/saleh-mubashar/pen/01a11a8a-f681-7db0-bc51-cf670f4121c0](https://codepen.io/editor/saleh-mubashar/pen/01a11a8a-f681-7db0-bc51-cf670f4121c0)

The useful part here isn't the particular color conversion. It's that the implementation lives in one place, while the code using the function only needs to provide the values it cares about.

[Read the complete article.](https://salehmubashar.com/blog/css-functions)

---

Thanks for reading!

Check out my latest guide on how to finally style native dropdowns using `appearance: base-select`: [HTML Selects Are Actually Styleable Now](https://salehmubashar.com/blog/html-selects-are-actually-styleable-now).

## Community discussion

Top comments from developers on daily.dev.

**@swarnasharmin** · 1 upvotes

> Native custom functions will easily replace Sass mixins; just need solid fallbacks until browser support catches up.

**@michelosaurusrex** · 1 upvotes

> I think this is really cool but the downside is that it has limited availability across major browsers ([https://caniuse.com/?search=%40function](https://caniuse.com/?search=%40function))

**@yaireo** · 1 upvotes

> This is why I've created this [https://yaireo.github.io/css-utility-functions/](https://yaireo.github.io/css-utility-functions/)
>
> Would be happy for contributions!

**@allinonetools** · 1 upvotes

> CSS custom functions look like a promising step toward reusable design logic without relying on JavaScript or preprocessors. The conditional `result` example using container queries is especially interesting, though limited browser support means progressive enhancement will be important.

**@diyweb** · 1 upvotes

> Nice walkthrough. Combining CSS custom functions with container queries could replace a lot of small preprocessor mixins. With support this limited, a fallback value next to each function call is probably the safe way to use it today.

## Similar posts on daily.dev

- [CSS-Tricks](https://daily.dev/posts/css-tricks-vkofgouts) · CSS-Tricks · 11 upvotes · 1 comments
- [sindresorhus/css-extras: Useful CSS custom functions using the new @​function rule](https://daily.dev/posts/sindresorhus-css-extras-useful-css-custom-functions-using-the-new-function-rule-gc8ee7ipe) · Hacker News · 3 upvotes · 0 comments
- [The Fundamentals and Dev Experience of CSS @function – Frontend Masters Blog](https://daily.dev/posts/the-fundamentals-and-dev-experience-of-css-function-frontend-masters-blog-21yo168d7) · Frontend Masters · 6 upvotes · 4 comments
- [CSS Infinity Use Cases · July 25, 2026](https://daily.dev/posts/css-infinity-use-cases-july-25-2026-wwuly17lm) · Adam Argyle · 10 upvotes · 2 comments

---

Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css)

[View this post on daily.dev](https://daily.dev/posts/creating-custom-functions-in-css-using-function-o2mzl5cof)

```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":"DiscussionForumPosting","mainEntityOfPage":"https://daily.dev/posts/creating-custom-functions-in-css-using-function-o2mzl5cof","headline":"Creating Custom Functions in CSS using @function","text":"CSS now supports user-defined functions via the @function at-rule, extending the existing toolkit of built-in functions like calc(), min(), max(), and clamp(). Developers can define custom functions, pass values into them, and return results usable anywhere in their styles, enabling reusable style logic without preprocessors.","url":"https://daily.dev/posts/creating-custom-functions-in-css-using-function-o2mzl5cof","datePublished":"2026-10-09T05:29:37.071Z","dateModified":"2026-10-11T17:35:24.164Z","author":{"@type":"Person","name":"Saleh Mubashar","url":"https://daily.dev/saleh28","image":"https://lh3.googleusercontent.com/a/ACg8ocLDlNiy-LgfjGu6ElMEN_knQRZTpAW1eBgp0EMm0LP-sFc=s96-c","description":"Web Developer and Technical Writer.\n","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":860}},"image":"https://media.daily.dev/image/upload/s--3oCLOklY--/f_auto/v1791523777/posts/O2mZL5cof?_a=BAMAMicg0","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":30},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":7}],"comment":[{"@type":"Comment","text":"Native custom functions will easily replace Sass mixins; just need solid fallbacks until browser support catches up.","datePublished":"2026-10-12T06:01:36.963Z","url":"https://daily.dev/posts/O2mZL5cof#c-I7uwWkTaC","author":{"@type":"Person","name":"Swarna Sharmin","url":"https://daily.dev/swarnasharmin","image":"https://media.daily.dev/image/upload/s--joHEq_jD--/f_auto/v1791022797/avatars/avatar_ZL6bebyCVkszL2cr0g8ab?_a=BAMAMicg0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"I think this is really cool but the downside is that it has limited availability across major browsers (https://caniuse.com/?search=%40function)","datePublished":"2026-10-09T07:43:13.373Z","url":"https://daily.dev/posts/O2mZL5cof#c-71L0k5YG4","author":{"@type":"Person","name":"Michel Van Autrève","url":"https://daily.dev/michelosaurusrex","image":"https://media.daily.dev/image/upload/s--eV5J7frz--/f_auto/v1771493973/avatars/avatar_xtCSMfHED4G2G66vJvJDU?_a=BAMAMiiu0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"This is why I’ve created this https://yaireo.github.io/css-utility-functions/\nWould be happy for contributions!","datePublished":"2026-10-09T14:54:53.529Z","url":"https://daily.dev/posts/O2mZL5cof#c-K6c0GTcNP","author":{"@type":"Person","name":"Yair Even Or","url":"https://daily.dev/yaireo","image":"https://avatars.githubusercontent.com/u/845031?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"CSS custom functions look like a promising step toward reusable design logic without relying on JavaScript or preprocessors. The conditional result example using container queries is especially interesting, though limited browser support means progressive enhancement will be important.","datePublished":"2026-10-10T02:57:44.456Z","url":"https://daily.dev/posts/O2mZL5cof#c-biETvr442","author":{"@type":"Person","name":"AllInOneTools","url":"https://daily.dev/allinonetools","image":"https://media.daily.dev/image/upload/s--4ZT8QlF0--/f_auto/v1769790028/avatars/avatar_igzBsWloJeaegzm9bQltZ?_a=BAMAMiiu0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"Nice walkthrough. Combining CSS custom functions with container queries could replace a lot of small preprocessor mixins. With support this limited, a fallback value next to each function call is probably the safe way to use it today.","datePublished":"2026-10-10T16:21:02.042Z","dateModified":"2026-10-10T16:26:10.848Z","url":"https://daily.dev/posts/O2mZL5cof#c-MTjhs6Xyo","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"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}],"isPartOf":{"@type":"WebPage","url":"https://daily.dev/sources/n1nvchoplsc934dnbf4hc","name":"Saleh Mubashar"}}
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Saleh Mubashar","item":"https://daily.dev/sources/n1nvchoplsc934dnbf4hc"},{"@type":"ListItem","position":3,"name":"Creating Custom Functions in CSS using @function"}]}
```