CSS custom functions

Experimental Reference ↗

@function defines reusable CSS calculations with arguments, defaults, typed values, and cascade-aware results.

@function --alpha(--color <color>, --amount <number>: .7)
  returns <color> {
  result: oklch(from var(--color) l c h / var(--amount));
}

.button {
  background: --alpha(var(--brand), .85);
}

This is experimental and not a production default. Keep the underlying value straightforward enough to express without the function when a fallback is required.