Learn Computer Academy

CSS Clamp Generator

Build a fluid clamp() value that scales smoothly between a minimum and maximum viewport width — no media queries needed.

CSS Units lesson

Preview

Presets

How this works

clamp(MIN, PREFERRED, MAX) picks the middle value unless it falls outside MIN–MAX, in which case it's clamped to whichever bound it crossed. PREFERRED is a linear formula in vw, worked out here from your two viewport/value pairs so the line passes through both exactly — that's what makes it grow smoothly in between instead of jumping.

Min viewport width

Max viewport width

Min value

Max value

Root font size

Output

clamp(1rem, 0.6479rem + 1.5023vw, 2rem)