calc() lets us use calculations to determine CSS values. Its greatest strength is that it allows us to combine different CSS types. For example, you could set the width of an item to be 100% but offset by 5px. With calc() that would look like width: calc(100% - 5px). Browser support for calc() is fantastic with all major browsers supporting it

Addition, subtraction, multiplication and division can be used in calc(): + - * /. Below, I have a widget to play around with calc() including addition and subtraction. It changes the width of the green square.

Content Width

.content { width: calc(100% - 0%); }

When using calc with multiplication, one of the values must be a number (no px). When using calc with division, the right-hand number must be a number as well. Also make sure that you aren’t dividing by 0. Here is another widget with multiplication and division.

Content Width

.content { width: calc(100% / 2); }

Keep in mind that calc() is not restricted to length types. Although not as useful, calc() can be applied to angles as well. The widget below can rotate the green rectangle based on a calculated angle value.

Content Tranform

.content { transform: rotateZ(calc(100deg - 0deg)); }

Here is calc() used to set the background-color of the rectangle.

Content Tranfotm

.content { background-color: rgb(calc(100 - 0), 100, 100); }


While this playground may not illustrate the effectiveness of calc() in a real world website, it does show how useful calc() can be. Here is a MDN article on calc().