CSS Math Functions

Imagine a tailor who only ever cuts fabric to fixed sizes, small, medium, or large. If a customer needs something in between, the tailor is stuck. Now imagine a tailor who can measure a customer on the spot and cut fabric to fit exactly, while never going smaller than a minimum or larger than a maximum size. That's what CSS math functions do for layouts. calc(), min(), max(), and clamp() let you do arithmetic and set flexible bounds directly inside your CSS values, so sizes can respond to the viewport instead of being locked to one fixed number.

In this page:

The calc() Function
The min() Function
The max() Function
The clamp() Function
Combining Math Functions With Custom Properties

Syntax

css

selector {
  width: min(value1, value2);
  width: max(value1, value2);
  width: clamp(minimum, preferred, maximum);
}

The calc() Function

calc() lets you mix units like percentages and pixels in a single expression, so you can subtract a fixed sidebar width from a fluid container width. This is one of the most useful CSS functions for responsive layouts, since it removes the need for JavaScript to compute mixed-unit sizes.

Note:

Always leave a space on both sides of + and - inside calc(); the operator would otherwise be parsed as part of the unit.
Accepted values:
calc(<expression>) — arithmetic with + - * /
calc(100% - 40px) — mixes percentages and lengths
calc(2 * 1rem) — multiplication needs a number on one side
spaces around + and - — required

Warning: Multiplication and division must involve at least one plain number, you cannot multiply two length units together.

Example: The calc() Function

css

<style>
.box {
  width: calc(100% - 50px);
  background: lightblue;
  padding: 10px;
}
</style>
<div class="box">Fluid width minus a fixed sidebar</div>

The min() Function

min() picks the smallest value from a comma separated list, so a box can shrink on small screens without ever exceeding a fixed maximum. This is commonly used to cap a value at a maximum while still letting it shrink freely on smaller screens.

Note:

Use min() to cap a fluid width, for example min(90%, 600px) never grows wider than 600px.
Accepted values:
min(<value>, <value>, ...) — the smallest resolved value
min(90%, 600px) — flexible but capped
min(1rem, 5vw) — mixes unit types
note: works in any length property

Warning: min() still needs valid comparable units, comparing a percentage to a plain unitless number is invalid.

Example: The min() Function

css

<style>
.box {
  width: min(90%, 600px);
  background: lightblue;
  padding: 10px;
}
</style>
<div class="box">Never wider than 600px, shrinks freely below that</div>

The max() Function

max() picks the largest value from a list, guaranteeing a minimum size even as other values shrink. This is the mirror image of min(), commonly used to enforce a comfortable minimum readable font size.

Note:

Combine max() with viewport units to guarantee readable text, max(16px, 1vw) never drops below 16px.
Accepted values:
max(<value>, <value>, ...) — the largest resolved value
max(50%, 300px) — flexible with a floor
max(1rem, 2vw) — never smaller than 1rem
note: works in any length property

Warning: max() does not clamp an upper bound, pair it with min() or clamp() if you also need a ceiling.

Example: The max() Function

css

<style>
p {
  font-size: max(16px, 1vw);
}
</style>
<p>Never smaller than 16px</p>

The clamp() Function

clamp(minimum, preferred, maximum) fixes a value between a floor and a ceiling while letting the preferred value flex in between, ideal for fluid typography. A single clamp() call often replaces several media queries that would otherwise be needed to adjust a value at different breakpoints.

Note:

Use clamp() for headings so text scales smoothly with the viewport without needing multiple media queries.
Accepted values:
clamp(min, preferred, max) — value that stays between min and max
clamp(1rem, 2.5vw, 2rem) — fluid font-size
clamp(300px, 50%, 800px) — fluid width
all three arguments — required

Warning: The preferred value must be capable of changing, a fixed unit like clamp(16px, 20px, 24px) will just always resolve to 20px.

Example: The clamp() Function

css

<style>
h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}
</style>
<h1>Scales fluidly between a floor and a ceiling</h1>

Combining Math Functions With Custom Properties

Math functions can reference CSS custom properties, letting you centralize a base value and derive several related sizes from it. This pattern keeps a whole design system's spacing or type scale consistent by deriving every size from one shared variable.

Note:

Store a base spacing unit in a custom property, then reuse calc() with that variable throughout your stylesheet for consistent spacing.
Accepted values:
calc(var(--gap) * 2) — scale a custom property
clamp(var(--min), 5vw, var(--max)) — fluid with tokens
min(var(--w), 100%) — capped by a token
var(--name) — must resolve to a valid value

Warning: Custom properties used inside calc() must resolve to a valid length or number, an empty or invalid variable breaks the whole expression.

Example: Combining Math Functions With Custom Properties

css

<style>
:root {
  --base: 8px;
}
.box {
  padding: calc(var(--base) * 2);
  background: lightblue;
}
</style>
<div class="box">Derived from one shared base value</div>

Live Example

Chapter Quiz — Complete all 25 topics to unlock

0/25 topics done

Complete these topics first:

← Previous Lesson CSS Masking Next Lesson → CSS Motion Path

CSS Math Functions

The calc() Function

The min() Function

The max() Function

The clamp() Function

Combining Math Functions With Custom Properties

Chapter Quiz — Complete all 25 topics to unlock

Login to run this code