calc() CSS function

Try it

width: calc(10px + 100px);

width: calc(100% - 30px);

width: calc(2em * 5);

width: calc(var(--variable-width) + 20px);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">Change my width.</div>
</section>

:root {
  --variable-width: 100px;
}

#example-element {
  border: 10px solid black;
  padding: 10px;
}

Syntax

/* calc(expression) */
calc(100% - 80px)

/* Expression with a CSS function */
calc(100px * sin(pi / 2))

/* Expression containing a variable */
calc(var(--hue) + 180)

/* Expression with color channels in relative colors */
lch(from aquamarine l c calc(h + 180))

The calc() function takes a single expression as its parameter, and the expression's result is used as the value for a CSS property. In this expression, the operands can be combined using the operators listed below. When the expression contains multiple operands, calc() uses the standard operator precedence rules:

+

Adds the specified operands.

-

Subtracts the second operand from the first operand.

*

Multiplies the specified operands.

/

Divides the left-side operand (dividend) by the right-side operand (divisor).

All operands, except those of type <number>, must be suffixed with an appropriate unit string, such as px, em, or %. You can use a different unit with each operand in your expression. You may also use parentheses to establish computation order when needed.

Description

There are a few points to note about calc(), which are detailed in the sections below.

Resulting values

The calc() function must stand in place of a full CSS value of one of the following types:

• <length>
• <frequency>
• <angle>
• <time>
• <flex>
• <resolution>
• <percentage>
• <number>
• <integer>
• One of the mixed types like <length-percentage>

calc() cannot only replace the numeric part of percentage values, length values, etc., without also replacing the unit after it. For example, calc(100 / 4)% is invalid, while calc(100% / 4) is valid.

The resulting value of calc() must be compatible with the context in which it is used. For example, margin: calc(1px + 2px) is valid, but margin: calc(1 + 2) is not: it is equivalent to specifying margin: 3, which results in the property being ignored.

When an <integer> is expected, the calc() expression can also evaluate to a <number>, which gets rounded to the nearest integer. So, calc(1.4) will result in a value of 1. If the fractional part of the value is exactly 0.5, the value is rounded towards positive infinity. For example, calc(1.5) will result in a value of 2, while calc(-1.5) will round to -1.

calc() performs floating point math following the IEEE-754 standard, which results in some considerations concerning the infinity and NaN values. For more details on how constants are serialized, see the <calc-keyword> page.

Input considerations

• calc() cannot perform calculations on intrinsic size values such as auto and fit-content. Use the calc-size() function instead.
• The * and / operators do not require whitespace, but adding it for consistency is recommended.
• It is permitted to nest calc() functions, in which case, the inner ones are treated as simple parentheses.
• Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables may be treated as if auto is specified.
• See <calc-sum> for more information on the syntax of + and - expressions.

CSS typed arithmetic

When using calc() to multiply values, using the * operator, only one value can contain a unit. Calculations like 200px * 4px are not supported as 800px² is meaningless in CSS.

Inversely, 200px / 4px resolves to 50, which does make sense in CSS. Therefore, when using the calc() function to divide numbers, using the / operator, supporting browsers allow units on both sides of the operand, provided they are of the same data type. For example, 100vw / 1px is valid and results in a unitless value.

The quotient can then be used in the values of properties or functions that accept a <number> as a value or parameter, or converted into a different data type by multiplying it by a typed value.

For a full explanation of typed arithmetic in CSS, along with examples, see Using CSS typed arithmetic.

Support for computing color channels in relative colors

The calc() function can be used to manipulate color channels directly within the context of relative colors. This allows for dynamic adjustments of color channels in color models such as rgb(), hsl(), and lch().

The relative color syntax defines several color-channel keywords, each of which represents the value of the color channel as a <number> (see Channel values resolve to <number> values for more information). The calc() function can use these color-channel keywords to perform dynamic adjustments on the color channels, for example, calc(r + 10).

Formal syntax

<calc()> = 
  calc( <calc-sum> )  

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<calc-product> = 
  <calc-value> [ [ '*' | / ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN        

Accessibility

When calc() is used for controlling text size, be sure that one of the values includes a relative length unit, for example:

h1 {
  font-size: calc(1.5rem + 3vw);
}

This ensures that text size will scale if the page is zoomed.

• MDN Understanding WCAG, Guideline 1.4 explanations
• Understanding Success Criterion 1.4.4: Resize Text | WAI | W3C

Examples

Positioning an object on screen with a margin

calc() enables positioning an object with a set margin. In this example, the CSS creates a banner that stretches across the window, with a 40-pixel gap between both sides of the banner and the edges of the window:

.banner {
  position: absolute;
  left: 40px;
  width: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
  box-sizing: border-box;
}

<div class="banner">This is a banner!</div>

Automatically sizing form fields to fit their container

Another use case for calc() is to help ensure that form fields fit in the available space, without extruding past the edge of their container while maintaining an appropriate margin.

Let's look at some CSS:

input {
  padding: 2px;
  display: block;
  width: calc(100% - 1em);
}

#form-box {
  width: calc(100% / 6);
  border: 1px solid black;
  padding: 4px;
}

Here, the form itself is established to use 1/6 of the available window width. Then, to ensure that input fields retain an appropriate size, we use calc() again to establish that they should be the width of their container minus 1em. Then, the following HTML makes use of this CSS:

<form>
  <div id="form-box">
    <label for="misc">Type something:</label>
    <input type="text" id="misc" name="misc" />
  </div>
</form>

Nesting with CSS variables

You can use calc() with CSS variables. Consider the following code:

.foo {
  --width-a: 100px;
  --width-b: calc(var(--width-a) / 2);
  --width-c: calc(var(--width-b) / 2);
  width: var(--width-c);
}

After all variables are expanded, --width-c's value will be calc(calc(100px / 2) / 2). When it's assigned to .foo's width property, all inner calc() functions (no matter how deeply nested) will be flattened to just parentheses. Therefore, the width property's value will eventually be calc((100px / 2) / 2), which equals 25px. In short, a calc() inside of a calc() is identical to using parentheses.

Adjusting color channels in relative colors

The calc() function can be used to adjust individual color channels in relative colors without the need for storing color channel values as variables.

In the example below, the first paragraph uses a <named-color>. In the paragraphs that follow, calc() is used with the rgb() and hsl() functions to adjust the values of each color channel relative to the original named color.

<p class="original">Original text color in rebeccapurple</p>
<p class="increase-hue">Hue increased by 80</p>
<p class="increase-lightness">Lightness increased by 20</p>
<p class="decrease-lightness">Lightness decreased by 10</p>

p {
  font-family: monospace;
  font-size: 16px;
}

.original {
  color: rebeccapurple;
}

.increase-hue {
  color: lch(from rebeccapurple l c calc(h + 80));
}

.increase-lightness {
  color: lch(from rebeccapurple calc(l + 20) c h);
}

.decrease-lightness {
  color: lch(from rebeccapurple calc(l - 10) c h);
}

For another example of using the calc() function to derive relative colors, see the Using math functions section on the Using relative colors page.

Specifications

Browser compatibility

See also

• <calc-sum>
• <calc-keyword>
• CSS functions
• A Complete Guide to calc() in CSS (CSS-Tricks)