In the first two of our three examples above, we want to set the style of an element according to the result of an addition or subtraction operation. This is exactly one of the use cases forcalc().

Thecalc() function lets you specify CSS property values usingaddition, subtraction, multiplication, and division. It is often used to combine two CSS values that have different units, such as% andpx.

Thecalc() math function takes a mathematical expression as a parameter and returns the result of that expression, e.g.:

property: calc(expression);

Click on the play icon below to see thecalc() example in the code playground and try it for yourself.

<div>  <code>width: calc(10px + 100px);</code></div><div>  <code>width: calc(2em * 5);</code></div><div>  <code>width: calc(100% - 32px);</code></div><div>  <code>width: calc(var(--predefined-width) - calc(16px * 2));</code></div>

div {  background-color: black;  margin: 4px 0;  width: 100%;}div > code {  display: block;  background-color: red;  color: white;  height: 48px;}.calc1 > code {  /* Output width: `110px` */  width: calc(10px + 100px);}.calc2 > code {  /* Output width: `10em` */  width: calc(2em * 5);}.calc3 > code {  /* Output width: Depends on the container's width */  width: calc(100% - 32px);}.calc4 > code {  --predefined-width: 100%;  /* Output width: Depends on the container's width */  width: calc(var(--predefined-width) - calc(16px * 2));}

There are cases where we don't want the value of a CSS property to exceed a certain number. Say, for example, we want the width of our content container to be the smaller of "the full width of our screen" and "500 pixels." In those cases, we can use the CSS math functionmin().

Themin() math function takes a set of comma-separated values as arguments and returns the smallest of those values, e.g.:

width: min(32px, 50%, 2rem);

This function is often used to compare two CSS values that have different units, such as% andpx.

Click on the play icon below to see themin() example in the code playground and try it for yourself.

<div>  <code>width: min(9999px, 50%);</code></div><div>  <code>width: min(9999px, 100%);</code></div><div>  <code>width: min(120px, 150px, 90%);</code></div><div>  <code>width: min(80px, 90%);</code></div>

div {  background-color: black;  margin: 4px 0;  width: 100%;}div > code {  display: block;  background-color: darkblue;  color: white;  height: 48px;}.min1 > code {  /* Output width: Depends on the container's width; */  /* on this page, likely to be `50%` of the container's width */  width: min(9999px, 50%);}.min2 > code {  /* Output width: Depends on the container's width; */  /* on this page, likely to be `100%` of the container's width */  width: min(9999px, 100%);}.min3 > code {  /* Output width: Depends on the container's width; */  /* on this page, likely to be `120px` of the container's width */  width: min(120px, 150px, 90%);}.min4 > code {  /* Output width: Depends on the container's width; */  /* on this page, likely to be `80px` of the container's width */  width: min(80px, 90%);}

Similar tomin(), sometimes we don't want the value of a CSS property to go below a certain number. For example, we might want the width of our content container to be thelarger of "the full width of our screen" and "500 pixels." In those cases, we can use the CSS math functionmax().

Themax() math function takes a set of comma-separated values as arguments and returns the largest of those values, e.g.:

width: max(32px, 50%, 2rem);

This function is often used to compare two CSS values that have different units, such as% andpx.

Notice the similarities and differences between the examples formin() andmax().

Click on the play icon below to see themax() example in the code playground and try it for yourself.

<div>  <code>width: max(50px, 50%);</code></div><div>  <code>width: max(50px, 100%);</code></div><div>  <code>width: max(20px, 50px, 90%);</code></div><div>  <code>width: max(80px, 80%);</code></div>

div {  background-color: black;  margin: 4px 0;  width: 100%;  height: 48px;}div > code {  display: block;  background-color: darkmagenta;  color: white;  height: 48px;}.max1 > code {  /* Output width: Depends on the container's width; */  /* on this page, likely to be `50%` of the container's width */  width: max(50px, 50%);}.max2 > code {  /* Output width: Depends on the container's width; */  /* on this page, likely to be `100%` of the container's width */  width: max(50px, 100%);}.max3 > code {  /* Output width: Depends on the container's width; */  /* on this page, likely to be `90%` of the container's width */  width: max(20px, 50px, 90%);}.max4 > code {  /* Output width: Depends on the container's width; */  /* on this page, likely to be `80%` of the container's width */  width: max(80px, 80%);}

We can combine the functions ofmin() andmax() by usingclamp(). Theclamp() math function takes a minimum value, the value to be clamped, and the maximum value as arguments, e.g.:

/* clamped value: 50%, minimum: 100px, maximum: 300px */width: clamp(100px, 50%, 300px);

• If the value to be clamped is less than the passed minimum value, the function will return the minimum value.
• If the value to be clamped is greater than the passed maximum value, the function will return the maximum value.
• If the value to be clamped is between the passed minimum and maximum values, the function will return the original value to be clamped.

This function is often used to compare two CSS values that have different units, such as% andpx.

Click on the play icon below to see theclamp() example in the code playground and try it for yourself.

<div>  <code>width: clamp(10%, 1px, 90%);</code></div><div>  <code>width: clamp(10%, 9999px, 90%);</code></div><div>  <code>width: clamp(125px, 1px, 250px);</code></div><div>  <code>width: clamp(25px, 9999px, 150px);</code></div>

div {  background-color: black;  margin: 4px 0;  width: 100%;  height: 48px;}div > code {  display: block;  background-color: darkgreen;  color: white;  height: 48px;}.clamp1 > code {  /* Output width: Depends on the container's width; */  /* on this page, likely to be `20%` of the container's width */  width: clamp(20%, 1px, 80%);}.clamp2 > code {  /* Output width: Depends on the container's width; */  /* on this page, likely to be `90%` of the container's width */  width: clamp(10%, 9999px, 90%);}.clamp3 > code {  /* Output width: `125px` */  width: clamp(125px, 1px, 250px);}.clamp4 > code {  /* Output width: `150px` */  width: clamp(25px, 9999px, 150px);}

When laying out and styling DOM elements, the four basic math functionscalc(),min(),max(), andclamp() are often sufficient. However, for advanced uses like mathematics learning materials, 3D visualizations, or CSS animations, you may consider using:

• Stepped value functions
  • round(): calculates avalue given a rounding strategy
  • mod(): calculates theremainder of a division operation with thesame sign as the divisor
  • rem(): calculates theremainder of a division operation with thesame sign as the dividend
• Trigonometric functions
  • sin(): calculates thetrigonometric sine of a number
  • cos(): calculates thetrigonometric cosine of a number
  • tan(): calculates thetrigonometric tangent of a number
  • asin(): calculates thetrigonometric inverse sine of a number
  • acos(): calculates thetrigonometric inverse cosine of a number
  • atan(): calculates thetrigonometric inverse tangent of a number
  • atan2(): calculates thetrigonometric inverse tangent given two numbers
• Exponential functions
  • pow(): calculates a numberraised to the power of another number
  • sqrt(): calculates thesquare root of a number
  • hypot(): calculates thesquare root of the sum of the squares of the given numbers
  • log(): calculates thelogarithm of a number (withe as the default base)
  • exp(): calculatese raised to the power of another number
• Sign functions
  • abs(): calculates theabsolute value of a number
  • sign(): calculates thesign (positive, negative, or zero) of a number

• You can use CSS math functions to create responsive user interfaces without writing any JavaScript code.
• CSS math functions can sometimes be used instead ofCSS media queries to define layout breakpoints.
• In 2023, members of the Interop Projectselected "CSS Math Functions" as a focus area of improvement. This means that browser vendors are working together to ensure that CSS math functions perform the same across browsers and devices.