As you may already know, CSS custom properties (aka CSS variables) let you store dynamic values and reuse them via var(). But what if you need the negative version of a variable—say, you store a gap size --gap: 1em, and elsewhere you want -1em? You can’t just write -var(--gap)—the minus prefix doesn’t work directly on a var(). Instead, developers have long used calc(var(--gap) * -1) or calc(0px - var(--gap)) as a workaround.
With the emerging custom CSS functions (part of the css-mixins-1 proposal), you can wrap that pattern in a reusable function. The spec itself gives the example:
@function --negative(--value) {
result: calc(-1 * var(--value));
}Then you can invoke --negative(...) wherever a value is expected.
This abstraction improves readability and reduces boilerplate in your styles. In the rest of this post, I’ll show how it works, when it’s usable, caveats, and live demo example you can explore on CodePen.
Status, browser support & spec details
As of mid-2025, custom CSS functions are still in experimental or prototype stage. Chrome (in Canary / with flags) is working on an implementation of the @function / <dashed-function> mechanism. You cannot reliably depend on this in production yet.
In the spec (CSS Mixins & Functions), a custom function is declared with @function <name>(<parameters>) { ... }, where <name> must begin with two dashes (--). Inside, you use a result: descriptor to emit the computed CSS value.
Custom functions and custom properties differ: functions can accept arguments, define defaults, and even include conditional logic (e.g. @media inside a function body). But they are still declarative (not imperative) and run substitution logic at computed value time.
One key caveat: because this is experimental, fallback strategies (e.g. @supports or backward patterns) are essential if you want your styles to function in current browsers.
Building the –negate() function
Here’s a step-by-step walkthrough of defining --negate().
@function --negate(--value) {
result: calc(-1 * var(--value));
}--negateis the function name (must begin with--).- It accepts one parameter named
--value. - Inside,
result:defines the output. We invokecalc(...)to multiply by-1. - You could later extend this with type constraints or default values (in more advanced forms) under the spec.
To use it:
:root {
--gap: 1em;
}
.some-element {
/* Using the custom function on a variable */
margin-top: --negate(var(--gap));
/* Or passing a literal value */
margin-left: --negate(2em);
}This reads nicely: “take the negative of that value.” When functions ship broadly, your CSS will remain readable and maintainable.
Live demo
If your browser supports it, you’ll see the .box has equal positive gap above and negative below, and .text is shifted upward by 0.5rem. In non-supporting browsers, fallback will be needed.
See the Pen CSS –negate() by Alex Ivanovs (@stackdiary) on CodePen.
Fallback strategy for today’s browsers
Since native @function support is rare, here’s a hybrid approach you can use now:
:root {
--gap: 1em;
}
/* Fallback “negate” macro via calc directly */
.some-element {
margin-bottom: calc(var(--gap) * -1);
}
/* Optionally wrap in a fallback @supports */
@supports (not (property: --negate(1em))) {
.another-element {
margin-top: calc(var(--gap) * -1);
}
}Using @supports, you can detect whether the custom function mechanism is available and conditionally apply either the function style or the fallback. This ensures your code degrades gracefully.
Caveats, gotchas, and edge cases
Some CSS properties don’t accept negative values (e.g. padding, border-width, width)—so negating those isn’t meaningful and will be clamped or invalid depending on the property.
Care with units: calc() expressions require correct unit mixing. For example, calc(-1 * var(--gap)) only works if --gap has a unit that can be multiplied by a unitless number.
Type constraints (e.g. <length>, <number>) might get added in spec evolutions, and default values may need syntax support.
