CSS clamp() Function

Definition and Usage

CSS clamp() Function used to set a value that adjusts adaptively between the minimum and maximum values according to the viewport size.

clamp() The function has three parameters: minimum value, preferred value, and maximum value. If the preferred value is within the specified range, the browser will choose the preferred value; otherwise, the browser will choose the minimum value or the maximum value.

Example

Set the minimum font size of the <h1> element to 2rem and the maximum font size to 3.5rem. At the same time, set the minimum font size of the <p> element to 1rem and the maximum font size to 2.5rem:

h1 {
  font-size: clamp(2rem, 2.5vw, 3.5rem);
}
p {
  font-size: clamp(1rem, 2.5vw, 2.5rem);
}

Try It Yourself

CSS Syntax

clamp(min, preferred, max)

Technical Details

Browser Support

The numbers in the table represent the first browser version that fully supports this function.