calc() keywords
calc() constants expose values such as pi, e, infinity, and NaN directly inside CSS math expressions. They support more expressive formula-driven styling.
Overview
calc() constants expose values such as pi, e, infinity, and NaN directly inside CSS math expressions. They support more expressive formula-driven styling.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 99 | 99 | 108 | 15.4 | 99 | 15.4 | |
NaN `NaN` constant | 99 | 99 | 114 | 16 | 99 | 16 |
e `e` constant | 110 | 110 | 108 | 15.4 | 110 | 15.4 |
infinity `infinity` and `-infinity` constants | 99 | 99 | 114 | 16 | 99 | 16 |
pi `pi` constant | 109 | 109 | 108 | 15.4 | 109 | 15.4 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.circle-text {
/* Use pi to calculate the circumference */
--circumference: calc(2 * pi * var(--radius));
}
.full-rotation {
/* Rotate 1 full revolution in radians */
transform: rotate(calc(2 * pi * 1rad));
}
.always-on-top {
/* Use infinity as the maximum z-index */
z-index: calc(infinity);
}Live demo
Circlecalculation with pi
Circlecalculation demo. with calc constants (e, pi, infinity, NaN) pi
PreviewFullscreen
beforeface with infinity
beforeface demo. with calc constants (e, pi, infinity, NaN) infinity
PreviewFullscreen
Use cases
Formula-based styling
Build expressive calculations for geometry, trigonometry, or generated dimensions directly in CSS.
Design system math
Encode reusable mathematical relationships without relying on hand-computed constants.
Cautions
- More mathematical power also makes CSS harder to scan if the formulas are not named or documented well.
- Use advanced constants only when they improve clarity or maintainability over literal values.
Accessibility
- Formula-driven styling should still preserve readable sizing, spacing, and zoom behavior.
- Do not let clever math obscure simple layout rules that teammates need to maintain.
Related links
Powered by web-features