CSS: calc()

By Xah Lee. Date: . Last updated: .

calc

calc() lets you do a simple calculation, for CSS property values.

It can be used anywhere that requires a length or number.

Operator Syntax

you can use any of the following operators

lengthA + lengthB

Add. (🛑 warning: must have space before and after the operator.)

.tRQtw {
 width: calc(100% - 80px);
}
lengthA - lengthB

Subtract. (🛑 warning: must have space before and after the operator.)

lengthA * number

Times. One of the argument must be a number.

lengthA / number

Divide. The right-hand side must be a number.

Parentheses can be used for grouping.

Example. Advanced

@media (width > 800px) {
 .multicol {
  column-count: 2;
 }
}

@media (width > calc(801px + 1rem * 26 * 2)) {
 .multicol {
  column-count: 3;
 }
}

@media (width > calc(801px + 1rem * 26 * 3)) {
 .multicol {
  column-count: 4;
 }
}

Math constants

you can use these math constants inside calc:

example

.d5p63 {
 width: 140px;
 height: 140px;
 border: solid 1px grey;
 border-radius: 50%;
 margin: 16px;
 padding: 8px;
 --x3: calc(2 * pi / 3 * 1rad);
 background-image: conic-gradient(red 0 calc(1 * var(--x3)), blue calc(1 * var(--x3)) calc(2 * var(--x3)), yellow calc(2 * var(--x3)) calc(3 * var(--x3)));
}