Runs in your browser · Last updated 7 September 2026
Free CSS Clamp Calculator
Free CSS clamp() calculator. Fluid type from min/max px and viewports — px and rem output. Browser tool — nothing is uploaded.
Preferred value is slope × 100vw + intercept. The clamp locks to min below the small viewport and max above the large one.
Size at 768px wide
23.47px
Region
fluid
Slope (px / vw-px)
0.01667
clamp() in px
clamp(16px, 1.6667vw + 10.6667px, 32px)
clamp() in rem
clamp(1rem, 0.10417vw + 0.66667rem, 2rem)
How to use this tool
- Enter min/max font (or spacing) in px and the viewports they belong to.
- Set the root px if you want rem output, and a preview width.
- Copy clamp() and check the computed size at the preview viewport.
Worked example
16px at 320px-wide, 32px at 1280px-wide: the rem form is clamp(1rem, 1.04167vw + 0.79167rem, 2rem) (root 16). At 320px it locks to 16px; at 1280px it locks to 32px. Pair with the px → rem converter or a wash from the CSS gradient generator. Check which selector wins with the CSS specificity calculator.
Frequently asked questions
- What does CSS clamp() do?
- clamp(min, preferred, max) picks the preferred value unless it would go below min or above max. For fluid type, preferred is usually a vw term plus a px/rem intercept.
- How is the preferred value built?
- slope = (maxPx − minPx) / (maxVw − minVw). intercept = minPx − minVw × slope. Preferred = slope×100vw + intercept. That hits minPx at minVw and maxPx at maxVw.
- px or rem?
- Both. Rem divides by the root font-size you type (16 by default). Use rem if the rest of the type scale is rem.
- Uploaded?
- No.