CSS Typed Arithmetic Playground

What is CSS typed arithmetic?

CSS values carry types: lengths (px, vw, rem), angles (deg, turn), times (s, ms), percentages and plain numbers. Classic calc() was strict about them — you could divide a length by a number, but never by another length, because the result (a squared or cancelled unit) had no meaning in the old model. Typed arithmetic upgrades calc() with real type algebra: when you divide two values of the same type, the units cancel and the result is a unitless number.

That one change unlocks a pattern developers used to need JavaScript for. calc(100vw / 1px) reads the viewport width as a plain number. Normalize it between two breakpoints and you get a 0-to-1 progress value, computed entirely in CSS, that can drive opacity, rotation, scale, hue — any property that accepts a number or can be multiplied from one. Scroll-free parallax, viewport-reactive interfaces and fluid design systems all get simpler.

Browser support

Typed arithmetic shipped in Chrome and Edge 140, Safari 26, and Firefox 158 (October 2026), which puts it within reach of roughly 84% of global browser usage. It is progressive enhancement by nature: in an older browser the declaration is simply invalid and dropped, so always pair it with a sensible default value declared first. The test at the top of this page checks your actual browser rather than a version chart, because channels, flags and embedded webviews do not always match the headline numbers.

What typed arithmetic still cannot do

Multiplying two typed values stays invalid — calc(10px * 2px) would be square pixels, which no property accepts. Division by a value of a different type is equally invalid: a length divided by a time would be a speed, and CSS has no speed type. The playground above lets you feel these edges safely: try breaking an expression and watch your browser reject it.

How to use this tool

1. Click Test My Browser — the probes run automatically on load, too. Each probe asks your browser to compute a real typed expression.
2. Read the probe table: green ticks mean same-type division, viewport-as-number and ratio-driven angles all work on this device.
3. Watch the live bar: it is faded by pure CSS typed arithmetic. Resize the window and compare it with the JavaScript-computed ratio beside it.
4. In the playground, pick a preset or write your own calc(), choose a property, and hit Apply to see the resolved value your browser computes.
5. Copy the support report if you need it for a bug report or a team compatibility check.

Related Tools