Widely available Very useful for everyday layout work when a relationship is easier to express as math than as a fixed value.

calc()

The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used with <length>, <frequency>, <angle>, <time>, <percentage>, <number>, <integer>, and <color-function> values.

calcLayoutSizing

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
calc
26
12
16
7
28
7
gradient color stops

Gradient color stops support
19
12
19
6
28
6
nested

Nested `calc()` support
51
16
48
11
51
11
number values

`<number>` value support
31
12
48
6
31
6
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (19)
Notes 5 item(s)
Implementation note
  • Before Firefox 59 `calc()` is not supported in `rgb()` and other color functions.
  • Before Firefox 57 `calc(1*2*3)` is not parsed successfully.
  • Firefox 57 increased the number of places `calc()` could substitute another value. See bug 1350857.
Removed
  • This feature was removed in a later browser version (53)
Compatibility
  • Available with a vendor prefix: -moz- (4)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (6)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (6)

Syntax

CSS 
.sidebar-layout {
  /* Allocate the remaining width to the main content after subtracting the sidebar width */
  width: calc(100% - 250px);
}

.centered-box {
  /* Centered in the viewport */
  margin-top: calc(50vh - 200px);
}

.fluid-padding {
  /* Minimum 16px, expands based on viewport width */
  padding: calc(1rem + 2vw);
}

Live demo

100% - Lockwidth

calc() function 100% - lockwidth demo.

PreviewFullscreen

Rem + Vw blend

calc() function Rem + vw blend demo.

PreviewFullscreen

putchild. Calculation

calc() function putchild. Calculation demo.

PreviewFullscreen

Use cases

  • Mixed-unit sizing

    Subtract fixed headers from viewport space or combine percentages with fixed gaps in one declaration.

  • Component layout rules

    Express relationships such as full width minus padding or shared columns with consistent arithmetic.

Cautions

  • calc() improves clarity only when the relationship itself is meaningful and easy to read.
  • Avoid stacking too many nested expressions when a simpler layout model would communicate intent better.

Accessibility

  • Math-based sizing can support flexible zoom-friendly layouts when used thoughtfully.
  • Test calculated dimensions under large text, zoom, and narrow screens to avoid clipping.

Related links