Why do CSS functions, like `pow()`, not work in browsers?

Your code width: calc(1px * pow(var(--size), 2)); doesn't work because pow() returns a raw <number>, not a length. You're trying to multiply a <number> (from pow) by 1px inside calc(), which is syntactically correct, but there's another problem: var(--size) is a <length> (2px), while pow() expects a <number> as its first argument. To use pow(), you need to pass it numbers, not dimensions. If you want to work with pixel values, you need to separate the number from the unit.

div { --size-number: 2; background-color: blueviolet; height: 5em; width: calc(1px * pow(var(--size-number), 2)); }