CSS Foundations

CSS Math Functions

Written by Swapnil RajaPublished 30 Jul 2026

Build fluid dimensions and dependable constraints by combining calc(), min(), max(), and clamp() with relative CSS units. It shows how calc(), min(), max(), and clamp() express fluid relationships while preserving readable minimum and maximum limits.

CSS math functions allow the browser to calculate a value from the space and variables available at layout time. They replace hard-coded intermediate sizes with an explicit relationship.

A fluid value still needs design boundaries. A heading that grows with the viewport needs a readable minimum and a maximum that preserves hierarchy; a content area may need to subtract gutters while refusing to exceed its preferred measure. clamp(), min(), and max() state those boundaries directly. This topic also connects with CSS Units and Container Queries.

Calculate instead of guessing

Example

css

.main {
  min-height: calc(100dvh - var(--header-height));
}

.card {
  width: min(100%, 34rem);
  padding: max(1rem, 2vw);
}

calc() combines compatible values. Addition and subtraction require whitespace around the operator. Multiplication and division are available in newer implementations but should be checked against the project’s browser requirements.

Fluid values with limits

Example

css

h1 {
  font-size: clamp(2rem, 1.2rem + 3vw, 4.5rem);
}

.layout {
  gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
}

clamp(minimum, preferred, maximum) is useful when a value should respond to available space without becoming too small or too large.

Rounding and advanced calculations

Modern math functions include round(), mod(), rem(), abs(), sign(), trigonometric functions, powers, roots, and logarithms. Use them when the relationship belongs in CSS and provide a simpler declaration before features with limited support.

Example

css

.meter {
  --steps: 8;
  width: round(nearest, 63%, calc(100% / var(--steps)));
  rotate: calc(sin(30deg) * 20deg);
}

Math Function Reference

Function	Purpose	Example
calc()	Combines compatible values in a calculation.	width: calc(100% - 2rem)
min()	Chooses the smallest argument.	width: min(70rem, 100%)
max()	Chooses the largest argument.	padding: max(1rem, 3vw)
clamp()	Sets a minimum, preferred value, and maximum.	font-size: clamp(1rem, 2vw, 1.5rem)

Complete Example

Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.

Complete runnable example

html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS Math Functions example</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.5;
    }
    main { max-width: 70rem; margin-inline: auto; }
    article, section, aside, form, .card, .panel {
      padding: 1rem;
      border: 1px solid #cbd5e1;
      border-radius: 0.6rem;
    }

.main {
  min-height: calc(100dvh - var(--header-height));
}

.card {
  width: min(100%, 34rem);
  padding: max(1rem, 2vw);
}

h1 {
  font-size: clamp(2rem, 1.2rem + 3vw, 4.5rem);
}

.layout {
  gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
}

.meter {
  --steps: 8;
  width: round(nearest, 63%, calc(100% / var(--steps)));
  rotate: calc(sin(30deg) * 20deg);
}
  </style>
</head>
<body>
  <main class="main"><section class="layout"><article class="card"><h1>Fluid type and spacing</h1><p>Resize the preview to see clamp() stay within its limits.</p></article></section></main>
</body>
</html>

Browser Support

Feature	Chrome	Edge	Firefox	Safari
calc()	26	12	16	7
min(), max(), and clamp()	79	79	75	13.1

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.

Notes

Prefer a readable formula tied to a design constraint. A complicated expression that merely reproduces a handful of breakpoints is harder to maintain than the breakpoints.
Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
Use a fallback when the support table shows that one of your required browsers predates the feature.

Conclusion

Use CSS math to express limits and relationships instead of adding breakpoints for every intermediate size.

Keep formulas short enough that another developer can explain them without a calculator. When a relationship becomes difficult to name or test, a small number of clear media or container queries may communicate the design better than a single elaborate expression.

PreviousCSS Variables NextCSS Element Selector