CSS clamp() calculator
Give a size at a small viewport and a size at a large one. Get the clamp() that moves smoothly between them, in rem, so it still respects the reader's browser font size.
The quick brown fox
Type scale
Why rem and not px
A size in px ignores the font size the reader chose in their browser. The same declaration in rem scales with it, so someone who set their default to 20px gets larger text instead of your fixed 16. The viewport term stays in vw either way — that part is about screen width, not reader preference.
FAQ
What is the middle term doing?
It is a straight line through your two points: an intercept plus a slope in vw. Below the small viewport it clamps to the minimum, above the large one to the maximum.
Can the max be smaller than the min?
Yes, and clamp() still behaves — but the result shrinks as the screen grows, which is almost never what you want. The page says so when it happens.
Is anything sent to your servers?
No. It is arithmetic in your browser; nothing you type leaves the page.
Built by the GO AI team. All free tools