CSS: clamp()

What is clamp()

clamp() is a CSS math function that restricts a value to a range between a minimum and a maximum.

it is used for dynamic sizing (responsive design)

Syntax

clamp(min, x, max)

• if x is between min max, x is used.
• if x ≻ max, max is used.
• if x ≺ min, min is used.

Example

.x {
 font-size: clamp(1rem, 2.5vw, 2rem);
}

.x {
 width: clamp(200px, 50%, 600px);
}

browser support

supported by all major browsers since 2021.