clamp()

The clamp() CSS function clamps a middle value within a range of values between a defined minimum bound and a maximum bound. The function takes three parameters: a minimum value, a preferred value, and a maximum allowed value.

Try it

Note that using clamp() for font sizes, as in these examples, allows you to set a font-size that grows with the size of the viewport, but doesn't go below a minimum font-size or above a maximum font-size. It has the same effect as the code in Fluid Typography but in one line, and without the use of media queries.

Syntax

/* Static values */
width: clamp(200px, 40%,  400px);
width: clamp(20rem, 30vw, 70rem);
width: clamp(10vw,  20em, 100vw);

/* Calculated values */
width: clamp(min(10vw, 20rem), 300px, max(90vw, 55rem));
width: clamp(100px, calc(30% / 2rem + 10px), 900px);

Parameters

The clamp(min, val, max) function accepts three comma-separated expressions as its parameters.

min

The minimum value is the smallest (most negative) value. This is the lower bound in the range of allowed values. If the preferred value is less than this value, the minimum value will be used.

val

The preferred value is the expression whose value will be used as long as the result is between the minimum and maximum values.

max

The maximum value is the largest (most positive) expression value to which the value of the property will be assigned if the preferred value is greater than this upper bound.

The expressions can be math functions (see calc() for more information), literal values, other expressions that evaluate to a valid argument type (like <length>), or nested min() and max() functions. For math expressions, you can use addition, subtraction, multiplication, and division without using the calc() function itself. You may also use parentheses to establish computation order when needed.

You can use different units for each value in your expressions and different units in any math function making up any of the arguments.

Keep the following aspects in mind while working with the function:

  • Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables may be treated as if auto had been specified.
  • It is permitted to nest max() and min() functions as expression values, in which case the inner ones are treated as simple parentheses. The expressions are full math expressions, so you can use direct addition, subtraction, multiplication and division without using the calc() function itself.
  • The expression can be values combining the addition ( + ), subtraction ( - ), multiplication ( * ) and division ( / ) operators, using standard operator precedence rules. Make sure to put a space on each side of the + and - operands. The operands in the expression may be any <length> syntax value. You can use different units for each value in your expression. You may also use parentheses to establish computation order when needed.
  • Oftentimes you will want to use min() and max() within a clamp() function.

Return value

clamp(MIN, VAL, MAX) is resolved as max(MIN, min(VAL, MAX)).

Based on the provided parameters, the function returns <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer>.

Formal syntax

<clamp()> = 
clamp( <calc-sum>#{3} )

<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*

<calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]*

<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-constant> |
( <calc-sum> )

<calc-constant> =
e |
pi |
infinity |
-infinity |
NaN

Examples

min, max, and clamp comparison

In this example we have a simple responsive example that makes use of min(), max(), and clamp() for some of the sizes.

The <body> element's width is set as min(1000px, calc(70% + 100px)). This means that the width will be set at 1000px, unless the result of calc(70% + 100px) is less than 1000px, in which case it will be set to that value instead. min() allows you set a maximum value.

The <p> element's font-size is set as max(1.2rem, 1.2vw). This means that the font-size will be set at 1.2rem, unless the computed value of 1.2vw is greater than that of 1.2rem, in which case it will be set to that value instead. max() allows you set a minimum value, which in cases like this is useful for accessibility purposes.

The <h1> element's font-size is set as clamp(1.8rem, 2.5vw, 2.8rem). This means that the font-size will be set at 1.8rem, until the computed value of 2.5vw becomes greater than that of 1.8rem. At this point, font-size will be set at 2.5vw, until 2.5vw's computed value becomes greater than that of 2.8rem. At this point, the font-size will be set at 2.8rem. clamp() allows you to set a minimum and maximum value.

You find this example live on GitHub, if you want to play around with it.

HTML

<h1>Simple responsive test</h1>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci,
  eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas erat
  eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at ligula.
  Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce iaculis,
  libero quis elementum viverra, nulla ante accumsan lectus, sit amet convallis
  lacus ipsum vel est. Curabitur et urna non est consectetur pulvinar vel id
  risus. Ut vestibulum, sem in semper aliquet, felis arcu euismod sapien, ac
  imperdiet massa nisl quis sem. Vestibulum ac elementum felis, in tempor velit.
  Pellentesque purus ex, mattis at ornare quis, porta condimentum mi. Donec
  vestibulum ligula vel nulla blandit, quis euismod nulla vestibulum.
  Suspendisse potenti. Nunc neque mauris, tempor sed facilisis at, ultrices eget
  nulla. Pellentesque convallis ante nec augue porttitor, id tempus ante luctus.
</p>

<p>
  Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. Nunc eu
  facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus at, pharetra
  quam. Cras feugiat vulputate tortor at rhoncus. Class aptent taciti sociosqu
  ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non felis
  quis sem lobortis sodales vel id libero. Phasellus sit amet placerat lorem.
</p>

CSS

html {
  font-family: sans-serif;
}

body {
  margin: 0 auto;
  width: min(1000px, calc(70% + 100px));
}

h1 {
  letter-spacing: 2px;
  font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}

p {
  line-height: 1.5;
  font-size: max(1.2rem, 1.2vw);
}

Specifications

Specification
CSS Values and Units Module Level 4
# calc-notation

Browser compatibility

BCD tables only load in the browser

See also