CSS calc() Validator
Check any calc(), min(), max() or clamp() expression against the CSS type rules — including typed division.
Paste any calc(), min(), max() or clamp() expression. The validator parses it with the CSS type rules — including the new typed-arithmetic division — and tells you whether it is valid, what type it produces, and why it fails if it fails.
Also check your browser's parser
CSS.supports() asks this browser whether it accepts the expression for a property. Note that a parser can accept syntax whose computed type still fails elsewhere — the type check above is the stricter test.
The calc() type rules, in plain language
Every CSS value has a type: length, percentage, angle, time, frequency, or a plain unitless number. calc() refuses combinations whose result would be meaningless, and a refused calc() invalidates the whole declaration — the property silently falls back, which is why these bugs are so hard to spot without a checker.
Add and subtract only between compatible types: lengths with lengths (any length units may mix), percentages with percentages, and lengths with percentages because many properties accept either. A number cannot be added to a length, and an angle cannot meet a time. Multiply only when at least one side is a plain number. Divide by a plain number, or — with typed arithmetic in current browsers — by a value of the same type, which cancels the units into a unitless number.
The two classic traps
First, whitespace: + and - must have spaces on both sides. In calc(100%-50px) the -50px is tokenized as a signed dimension, not an operator, and the declaration dies. Second, division by zero: a literal zero divisor, or a sub-expression that computes to zero such as a viewport ratio at an exact breakpoint, invalidates the value at computed time. Guard ratios with clamp() so the divisor can never reach zero in your formulas.
What about var()?
A custom property's type is only known where the variable is defined (or registered with @property), so no static checker can fully type an expression containing var(). This validator treats var() as a wildcard that is compatible with anything, flags every place it had to assume, and reports the type as conditional. If you register your custom properties with @property and a concrete syntax, your own code gets the same guarantees this page checks for literals.
How to use this tool
- Paste your expression — with or without the outer calc() — or tap a preset chip to see a known good or bad case.
- Click Validate. Read the verdict, the result type, and the step-by-step notes showing how each operation was typed.
- If it fails, the message names the exact rule broken: type mismatch, missing spaces around + or -, an illegal multiplication, or a zero divisor.
- Use the result type to pick a property it fits — the page lists what the result can drive.
- Optionally cross-check with the CSS.supports() button, which asks your own browser whether it accepts the expression for a chosen property.
Frequently Asked Questions
Related Tools
CSS Typed Arithmetic Playground
Test typed division support in your browser and play with live expressions.
CSS Unit Division Calculator
Divide CSS units, watch types cancel, and convert between units with context.
Responsive CSS Formula Generator
Build viewport-to-property formulas visually and copy the calc() code.
Check Out Other Popular Tools
Text Diff Checker
Compare two text files or code snippets to find the difference. Highlight added and removed lines instantly. Free and private.
WebGPU Test — GPU Support Checker, Adapter Info & Benchmark
Check WebGPU support on your device: GPU adapter, vendor, features and limits, plus a real WGSL compute benchmark. Runs 100% in your browser.
FAHES & Istimara Due Date Checker — Which One Has to Happen First & Renewal Rules
Enter your istimara expiry and last FAHES pass date to see which Saudi vehicle document is due first, the exact due dates, and the correct renewal order (FAHES before istimara). Free, in your browser.
Was this tool helpful?
Comments
Loading comments...