clamp()

The clamp() CSS function let’s you define a range of values for the property of an element. It’s especially useful in responsive layouts when used in conjunction with relative units like vw and vh.

Syntax

clamp() uses 3 parameters: a minimum, preferred, and maximum value.

/* 
propery: clamp(min, pref, max);
*/

width: clamp(100px, 6vw, 200px);

font-size: clamp(12px, 3vw, 18px);

Values

Preferred
The middle preferred value is the main value that tries to get applied to the element.

Minimum
If the rendered value falls below the preferred value, the minimum value on the left is applied. The elements value will not go below the minimum setting.

Maximum
If the rendered element exceeds the preferred value, the maximum value on the right is used instead. The elements value will not go beyond the maximum setting.

Browser Compatibilty

Demos

User-submitted codepen.io examples of clamp() ↴

@themolitor

See the Pen on CodePen.

reply?

Want to Contribute?

Submit a codepen.io link that demonstrates clamp():