CSS Clamp Calculator
Fluid type sizes with the clamp() formula done for you.
Runs in your browser. Nothing is uploaded — your input is processed on this device and discarded when you close the tab.
CSS Clamp Calculator
How to use this tool
- Enter the smallest and largest font sizes you want, in pixels.
- Enter the viewport widths at which those sizes should apply.
- Press Generate for the clamp() value, which scales smoothly between the two widths and holds steady outside them.
Worked example
For sizes 16px to 24px across viewports 320px to 1280px, the slope is (24 - 16) / (1280 - 320) x 100 = 0.8333vw and the intercept is 13.3333px, giving 'clamp(16px, 0.8333vw + 13.3333px, 24px)'.
What this tool does not do / Limits
Pixel inputs only, and the maximum size and viewport must each be larger than the minimum, or the formula has no sensible slope. The result is a single clamp() value; it does not handle rem-based scales or multi-step type scales.
Frequently asked questions
What does the middle value do?
It is the fluid part: a viewport-relative size plus a fixed offset, so the text grows smoothly as the screen widens between your two viewport widths.
Why does the size stop changing outside the range?
Because clamp() never goes below its first value or above its third value, so small screens stay at the minimum and large screens stay at the maximum.
Related tools
JSON Studio
Format, validate, minify, query and compare JSON in your browser, with precise line-and-column errors.
LiveRegex Tester
Test patterns against sample text with match highlighting, capture groups and a safe one-second timeout.
LiveSecurity Header and DNS Checker
Check HSTS, CSP and other security headers, TLS details, and DNS/email authentication records (SPF, DKIM, DMARC).
Live