The `clamp()`

CSS function clamps a value between an upper and lower bound. `clamp()`

enables selecting a middle value within a range of values between a definited minimum and maximum. It takes three parameters: a minimum value, a preferred value, and a maximum allowed value. The `clamp()`

function can be used anywhere a `<length>`

, `<frequency>`

, `<angle>`

, `<time>`

, `<percentage>`

, `<number>`

, or `<integer>`

is allowed.

`clamp(MIN, VAL, MAX)`

is resolved as `max`

(MIN, `min`

(VAL, MAX))

/* property: clamp(expression{3}) */ width: clamp(10px, 4em, 80px);

In the above example, the width will be at most 80px, at least 10px wide, but 4ems wide if an em is currently between 2.5p and 20px wide.

Let's assume an em in the above case is 16px wide:

width: clamp(10px, 4em, 80px); /* given 1em = 16px, 4em = 16px * 4 = 64px */ width: clamp(10px, 64px, 80px); /* clamp(MIN, VAL, MAX) is resolved as max(MIN, min(VAL, MAX))) */ width: max(10px, min(64px, 80px)) width: max(10px, 64px); width: 64px;

The `clamp()`

function takes three comma separated expressions as its parameter, in the order of minimum value, preferred value, maximum value.

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

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

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

The expressions can be math functions (see `calc()`

for more information), literal values, or other expressions, such as `attr()`

, that evaluate to a valid argument type (like `<length>`

), or nested `min()`

and `max()`

functions. As math expressions, so 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.

- 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.

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

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

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

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

`clamp()`

allows you to set a **minimum** and **maximum** width for an image. In this example, the CSS creates a logo that stretches 40% of the way across the window, but doesn't shrink below 100px on small devices and doens't grow larger than 300px on wider devices, without the use of media queries:

.logo { width: clamp(100px, 40vw, 300px); }

<img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo">

In this example, the logo will be at least `100px`

wide on any viewport narrower than `400px`

, `300px`

on all viewports wider than `1`

, `200px`

, and `40%`

of the width of the viewport on any viewport in between

Another use case for CSS functions is allow a font size to grow while ensuring it is at least a mimum size, enabling responsive font sizes while ensuring legibility, and providing a maximum size so it doesn't grow too huge..

Let's look at some CSS:

h1 { font-size: 2rem; } h1.responsive { font-size: clamp(32px, 2em, 2rem); }

The font-size will at minimum 2ems, or twice the size of the inherited font size. We are telling it to not go below 32px if the inherited font is small. But what if the inherited font size is huge? We are setting the upper bound and twice the root em unit, but hoping the font falls between that range when it is twice the inherited font size value. This ensure it is legible and ensures accessibility

<h1>This text is always legible, but doesn't change size</h1> <h1 class="responsive">This text is always legible, and is responsive, to a point</h1>

Think of the `clamp()`

function as defining a range of value allowed for a property, with a fixed ceiling and floor. Once supported, you will generally want to use `clamp()`

instead of `min()`

or `max()`

in most scenarios.

TBD

Specification | Status | Comment |
---|---|---|

CSS Values and Units Module Level 4 The definition of 'clamp()' in that specification. | Editor's Draft | Initial definition. |

Desktop | ||||||
---|---|---|---|---|---|---|

Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |

Basic support | ? | ? | ? | ? | ? | ? |

Mobile | |||||||
---|---|---|---|---|---|---|---|

Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |

Basic support | ? | ? | ? | ? | ? | ? | ? |

© 2005–2018 Mozilla Developer Network and individual contributors.

Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.

https://developer.mozilla.org/en-US/docs/Web/CSS/clamp