CSS calc() Playground

Features

• Write a calc() expression with live validation and evaluation
• ⚠️ Catches the classic missing spaces around + and -: calc(100%-2rem) is invalid yet looks fine
• ⚠️ Checks units: addition needs like quantities and multiplication or division needs a unitless number on one side
• Understands parentheses and nested calc(), and reports unmatched ones
• Emits container width, font size and gap as custom properties (--cw, --fs, --gap)
• Expressions can reference those three quantities with var()
• Switch the unit between px, rem, vw and percent and watch the result change
• Only numbers, units, operators, parentheses and var() are understood — nothing is executed (no eval)
• Everything runs in your browser and nothing is uploaded

How to use

1. Set the container width, font size and gap, and pick a unit
2. Type a calc(...) expression, leaving a space on both sides of + and -
3. Read the evaluation notes and any error messages below
4. Copy the generated CSS, custom properties and rule together

FAQ

Why does calc(100%-2rem) do nothing even though it looks fine?

Because the plus and minus operators need a space on both sides. The CSS specification requires whitespace around `+` and `-` when they act as operators, so `calc(100%-2rem)` is an invalid value — the browser drops the whole declaration and the property falls back to its initial value or auto. There is no error and no warning, which is what makes it so hard to find. Writing `calc(100% - 2rem)` fixes it (multiplication and division need no spaces).

Why is 1px * 1px not allowed?

Because multiplication in CSS multiplies the units: `1px * 1px` gives square pixels, which CSS does not have as a unit. One side of a multiplication or division must be a unitless number, so `1px * 2` or `6px / 2` are what work. This is the part of `calc()` that is easiest to confuse with ordinary arithmetic.

Is my expression executed as code?

No. There is no `eval` here — that would run whatever a user types as code. Validation goes through a small parser that understands only numbers, units, the four operators, parentheses and `var()`, and rejects anything else. As it happens, `eval` would not catch the missing-space mistake above either: it would happily read `100%-2rem` as 98.

A percentage is relative to what?

To whatever the property you use it on is relative to. On `width` it is the containing block width; on `font-size` it is the parent font size — so what `100%` means depends on which property it is written on. That is also why relative units cannot be reduced to one definite number out of context: when relative units are involved, this tool gives the unit type and a reference value rather than inventing a pixel figure.