/    Sign up×
Reference /Pin to ProfileBookmark

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.


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);


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

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.

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


User-submitted codepen.io examples of clamp()

Want to Contribute?

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

to submit a demo.


Help @reference spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ

legal: ({
terms: of use,
privacy: policy
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,