CSS calc() Function

❮ Previous Functions Next ❯


img {
  width: calc(100% - 100px);


The calc() css function perform calculations when specifying CSS property values.

It can be used with length, frequency, angle, time, percentage, number, or integer values.

Version: CSS

Standard Syntax

/* property: calc(expression) */
width: calc(100% - 100px);

Browser Support

The numbers in the table specify the first browser version that fully supports the property.


Function Arguments

The following table describes the arguments of this function.

Argument Description
expression Specifies a single expression as its parameter, with the expression's result used as the value. The expression can be any simple expression combining the following operators.
  • + Addition.
  • - Subtraction.
  • * Multiplication. (At least one of the arguments must be in number).
  • / Division. The right-hand side must be in number.

More Example

You can extend the capabilities of calc() by passing in CSS custom properties.


div {
  --base-hue: 120;
  --saturation: 55%;
  --lightness: 40%;
  --rotation: 40;

div {
  padding: 0.25rem;
  background-color: hsl(var(--hue), var(--saturation), var(--lightness));

.example1 {
  --hue: calc(var(--base-hue));

.example2 {
  --hue: calc(var(--base-hue) + var(--rotation));

.example3 {
  --hue: calc(var(--base-hue) + var(--rotation) * 2);

The above example create color palette using hsl() (which stands for hue, saturation, and lightness).

The given values for saturation, lightness, and a starting hue, you can calculate complementary values to build a full palette.

Because of the commonality among the saturation and lightness values, the palette will feel cohesive.


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

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

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


❮ Previous Functions Next ❯