CSS clamp() Function
Example
Set the <h1> element's font-size to 5vw, but never smaller than 1.5rem or larger than 3rem.
Set the <div> element's font-size to 2.5vw, but never smaller than 1rem or larger than 2rem. Also set the div container to 50% wide, but never smaller than 200px or wider than 600px:
h1 {
font-size: clamp(1.5rem, 5vw, 3rem);
}
div {
border: 1px solid green;
padding: 10px;
font-size: clamp(1rem, 2.5vw, 2rem);
width:
clamp(200px, 50%, 600px);
}
Try it Yourself »
Definition and Usage
The CSS clamp() function is used to set a
value that will adjust responsively between a minimum value, a preffered value, and a maximum value
depending on the size of the viewport.
The clamp() function has three parameters: a minimum value, a preferred
value, and a maximum value:
- If the preferred value is between the min and max value, the preferred value is used
- If the preferred value is smaller than the min value, the min value is used
- If the preferred value is larger than the max value, the max value is used
| Version: | CSS Values and Units Module Level 4 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| clamp() | 79 | 79 | 75 | 13.1 | 66 |
CSS Syntax
clamp(min,
preferred, max)
| Value | Description |
|---|---|
| min | Optional. The smallest allowed value |
| preferred | Required. The ideal (preferred) value |
| max | Optional. The largest allowed value |
