CSS math functions: calc, min, max, and clamp explained

If you have ever written five media queries to handle font sizes across screen widths, CSS math functions are the tool that eliminates most of that work. These four functions, calc(), min(), max(), and clamp(), let you express responsive sizing logic directly in your CSS values, without breakpoints.

This article walks through how each function works, the rules you need to know before using them, and practical examples for responsive layouts and fluid typography.

What are CSS math functions?

CSS math functions are built-in CSS functions that perform mathematical calculations to produce a CSS value. They accept expressions combining numbers, units, and operators, and return a single computed value that the browser applies to the property. The four core functions (calc(), min(), max(), and clamp()) are fully supported across all modern browsers and safe for production use in 2026.

They are most commonly used for responsive design: setting widths, font sizes, spacing, and layout values that adapt to viewport size without relying on media query breakpoints.

The four core CSS math functions

Function	What it does	Equivalent shorthand
calc()	Computes an expression, can mix units	N/A
min()	Returns the smallest of two or more values	width + max-width in one line
max()	Returns the largest of two or more values	width + min-width in one line
clamp()	Clamps a value between a min and max	min() + max() combined

The calc() function

calc() lets you calculate CSS property values using mathematical expressions. It accepts addition (+), subtraction (-), multiplication (*), and division (/), and, crucially, lets you mix different units in a single expression.

.class-name {
  property: calc(expression);
}

This is the part that makes calc() genuinely useful. You cannot write 100% - 70px as a plain CSS value because the browser cannot resolve mixed units at parse time. calc() defers the calculation to render time, when the browser knows the actual pixel values.

Rules to know before using calc()

These rules catch most of the bugs developers run into:

1. Whitespace around + and - is required.

/* Invalid — reads as a percentage followed by a negative length */
width: calc(100% -70px);

/* Valid */
width: calc(100% - 70px);

Multiplication and division do not require whitespace, but adding it is good practice for readability.

2. Both values in addition and subtraction must have units, or neither should.

/* Invalid */
width: calc(100% - 70);

/* Valid */
width: calc(100% - 70px);
font-weight: calc(300 + 400); /* unitless + unitless is fine */

3. Division requires a unitless right-hand value.

/* Invalid */
width: calc(300px / 20px);

/* Valid */
width: calc(300px / 20);

4. Operator precedence follows standard math. Multiplication and division resolve before addition and subtraction. Use parentheses to override:

height: calc(1000px - (200px + 400px)); /* resolves to 400px */

calc() in practice

Responsive container with a fixed gutter:

<div class="container">exercise</div>

.container {
  text-align: center;
  background-color: crimson;
  color: white;
  font-size: 1.7em;
  font-weight: 700;
  padding: 3em;
  width: calc(100% - 100px);
}

calc(100% - 100px) makes the element 100px narrower than its parent. When combined with margin: 0 auto, the remaining space is distributed evenly, creating a 50px gutter on both sides regardless of viewport width.

Nesting calc():

/* Instead of this */
height: calc(1000px - calc(200px + 400px));

/* Do this — the inner parentheses work the same way */
height: calc(1000px - (200px + 400px)); /* 400px */

calc() with CSS variables:

One of calc()'s most practical features is working with custom properties:

.container {
  --width: 100px;
  width: calc(var(--width) * 4); /* 400px */
}

This is particularly useful in design systems where spacing and sizing tokens are defined as CSS variables and then composed in component styles.

The min() function

min() accepts two or more comma-separated values and returns the smallest one. The browser evaluates which value is smallest at the current viewport size and applies it.

.class-name {
  property: min(value1, value2);
}

You can do math inside min() without wrapping in calc(). The same rules apply.

min() in practice

Responsive width with a hard maximum:

<div class="container">CODE</div>

.container {
  background-color: crimson;
  height: 200px;
  width: min(60vw, 700px);
  margin: 2em auto;
  text-align: center;
  padding: 2em;
  font-size: 2rem;
  color: white;
}

At a 1200px viewport: 60vw = 720px. Since 720 > 700, the browser picks 700px. At a 900px viewport: 60vw = 540px. Since 540 < 700, the browser picks 540px.

width: min(60vw, 700px) is exactly equivalent to:

width: 60vw;
max-width: 700px;

min() lets you express both in a single declaration. Think of it this way: min() sets a maximum. The value never exceeds the fixed option.

Fluid font size with a cap:

.container {
  font-size: min(7rem, 2vw);
}

The font size scales down with viewport width but never exceeds 7rem.

The max() function

max() does the opposite of min(): it returns the largest value from its arguments.

.class-name {
  property: max(value1, value2);
}

max() in practice

Responsive width with a hard minimum:

.container {
  width: max(60%, 700px);
}

This is equivalent to:

width: 60%;
min-width: 700px;

The width scales with the viewport but never drops below 700px. max() sets a minimum. The value never falls below the fixed option.

Fluid font size with a floor:

.container {
  font-size: max(7rem, 2vw);
}

The font size scales up on larger screens but never drops below 2vw.

A useful memory rule: min() sets a maximum value, and max() sets a minimum value. The function name refers to how it selects its value, not the constraint it creates.

The clamp() function

clamp() combines min() and max() into a single function. It clamps a value between a defined minimum and maximum, with a preferred value that scales between the two.

.class-name {
  property: clamp(minValue, preferredValue, maxValue);
}

The three parameters must always appear in this order:

• minValue: the floor. Applied when the preferred value drops below it.
• preferredValue: the ideal value, usually a viewport-relative unit like vw or %. Applied when it falls between min and max.
• maxValue: the ceiling. Applied when the preferred value exceeds it.

clamp() in practice

Responsive width between fixed bounds:

.container {
  background-color: grey;
  width: clamp(250px, 40vw, 800px);
}

At a 1400px viewport: 40vw = 560px. Since 560 is between 250 and 800, the browser uses 560px. At a 500px viewport: 40vw = 200px. Since 200 < 250, the browser uses the minimum: 250px. The width never exceeds 800px.

Fluid typography with clamp() (the most common use case):

.container {
  font-size: clamp(2rem, 2.5vw, 5rem);
}

The font size scales with the viewport: minimum 2rem on small screens, maximum 5rem on large screens, and 2.5vw in between. This is the pattern that replaces multiple font-size breakpoints with a single line.

For calculating the preferred value mathematically, this clamp calculator lets you input min and max font sizes and returns the optimal vw preferred value.

When to use each CSS math function

You want to...	Use
Mix units (px + %, rem + vw)	calc()
Set a maximum size that scales down	min()
Set a minimum size that scales up	max()
Scale fluidly between a min and max	clamp()
Fluid typography without breakpoints	clamp()
Compose CSS custom property values	calc()

Beyond the four core functions: CSS math in 2026

The four functions above cover the vast majority of practical use cases. CSS Values Level 4 also shipped a broader set of math functions in 2024-2025 that are now production-safe across all major browsers:

• round(): rounds a value to the nearest step (round(nearest, 15px, 4px) returns 16px)
• mod() and rem(): return the remainder of a division, useful for repeating patterns
• sin(), cos(), tan(): trigonometric functions for animation paths and geometric layouts
• pow(), sqrt(): exponential calculations for design system scale ratios

These are niche but genuinely useful when you need precise mathematical relationships in your CSS without reaching for JavaScript. The MDN guide on using CSS math functions covers the full list with browser support details.

CSS math functions replace most media query breakpoints

The original reason to learn these functions is practical: a well-placed clamp() on font size or min() on a container width often eliminates two or three media queries entirely. The layout adapts continuously rather than snapping at fixed breakpoints, and the resulting CSS is shorter and easier to maintain.

For developers working on responsive design in 2026, these four functions are foundational. They work on any CSS property that accepts a numerical value: widths, heights, font sizes, padding, margins, gaps, and more.

If you are building component-based layouts and want to understand how CSS interacts with JavaScript-driven state, web app state management explained covers how UI state and CSS work together in modern web applications.

FAQs

1, What are CSS math functions?

CSS math functions are built-in functions that compute a mathematical expression and return a CSS value. The four core functions are calc(), min(), max(), and clamp(). They are used primarily for responsive design, letting you express fluid sizing, spacing, and typography that adapts to viewport size without media query breakpoints.

2, What is the difference between calc(), min(), max(), and clamp() in CSS?

calc() computes a mathematical expression and can mix units. min() returns the smallest of two or more values, effectively setting a maximum constraint. max() returns the largest value, effectively setting a minimum constraint. clamp() combines both: it takes a minimum, preferred, and maximum value and clamps the result within that range.

3, When should I use clamp() instead of calc()?

Use clamp() when you need a value that scales fluidly between a fixed minimum and maximum, typically for fluid typography or responsive widths. Use calc() when you need to compute a specific value from an expression, especially when mixing units like 100% - 2rem. In practice, clamp() is the go-to for font sizes and calc() is the go-to for layout arithmetic.

4, Does CSS calc() work with CSS variables?

Yes. calc() works with CSS custom properties (variables) using the var() function inside the expression: width: calc(var(--base-size) * 4). This is one of the most practical uses of calc() in design systems, where sizing tokens are defined as custom properties and composed in component styles.

5, Why does my calc() expression not work?

The most common causes are: missing whitespace around + or - operators (required), mixing unitless and unit values in addition or subtraction (invalid), or using a unit on the right side of a division (the divisor must be unitless). Check those three rules first.

6, What does min() do in CSS and how is it different from max-width?

min() selects the smallest value from its arguments, which makes it behave like a combined width and max-width declaration. width: min(60vw, 700px) is equivalent to width: 60vw; max-width: 700px. The value scales with the viewport but never exceeds the fixed option.

7, Are CSS math functions supported in all browsers?

The four core functions (calc(), min(), max(), and clamp()) are fully supported across all modern browsers including Chrome, Firefox, Safari, and Edge. The newer CSS Values Level 4 functions (round(), mod(), trigonometric functions) shipped across major browsers in 2024-2025 and are production-safe in 2026, though you should verify support for specific functions on CanIUse before using them in critical paths.