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

font-size: clamp(1rem, 2.5vw, 2rem);

width: clamp(200px, 50%, 600px);

• CSS: Font based units (rem rcap rch rex ric)
• CSS: viewport based units (vw vh vmin vmax vi vb ...)
• CSS: Percentage value

browser support

supported by all major browsers since 2021.