![Adam Argyle](https://web.dev/images/authors/adamargyle.jpg) Adam Argyle [X](https://twitter.com/argyleink) [GitHub](https://github.com/argyleink) [Homepage](https://nerdy.dev)

<br />


Published: March 06, 2025

<br />

On February 25th Chrome published an [Intent To Ship for `@function`](https://groups.google.com/a/chromium.org/g/blink-dev/c/bvi4D7eD7wI/m/djYVLu6OAwAJ) and received feedback requesting a longer experimentation phase. While the overall experimentation phase wasn't short, there have been some recent impactful spec changes, and these deserved some more experimentation time.

We're also hopeful and excited that this extended experimentation phase may yield more community experimentation.

## Call to experiment

Now is the time to grab a copy of [Canary](https://www.google.com/chrome/canary/), enable [experimental web platform features](https://developer.chrome.com/docs/web-platform/chrome-flags.md.txt), start testing CSS `@function`, and [report any bugs](https://issues.chromium.org/issues/new?component=1456329&template=0) you find. We now have time to experiment longer, we should take advantage of this.

To help get you started, here's a few explorations:

- [Pontus Horn - button variants](https://codepen.io/pantz/pen/wBvJjGV)
- [Nils Riedemann - font scales](https://codepen.io/nocksock/pen/YPzWpWY)
- [Bramus - a light dark function for more than color](https://codepen.io/bramus/pen/wBvKVpR)

The following CSS demonstrates a terse yet useful example:

```css
@function --light-dark(--light, --dark) {
    result: var(--light);
    
    @media (prefers-color-scheme: dark) {
        result: var(--dark);
    }
}
```
[CSS Mixins 1 Specification](https://drafts.csswg.org/css-mixins-1/#defining-custom-functions)

## Want to know more about `@function`?

[Bramus has a great set of demos](https://www.bram.us/2025/02/18/css-at-function-and-css-if/) and [CSS Tricks also didn't delay to jump on the excitement](https://css-tricks.com/functions-in-css/).
> Arguments?! Return values?! That's worth spitting my coffee out for! I had to learn more about them, and luckily, the spec is clearly written.
- [Juan Diego Rodriguez](https://css-tricks.com/author/monknow/) on [CSS Tricks](https://css-tricks.com/functions-in-css/)