Set the smallest size at your smallest viewport and the largest size at your largest viewport. The generated clamp() interpolates linearly between them using vw units, and stays pinned to the min/max outside that range.
All tools/Web & CSS
CSS Clamp() Calculator
Generate a fluid clamp() value that scales smoothly between a min and max size across viewport widths.
The quick brown fox
Resize your browser window to see this scale — clamp() responds to real viewport width, not this preview box.
CSS
How this works & FAQ
Why use clamp() instead of media queries?
It scales continuously with the viewport instead of jumping at fixed breakpoints, giving smoother, more natural fluid typography with one line of CSS.
What is CSS clamp() used for?
clamp(min, preferred, max) picks a value that scales with the viewport but never goes below min or above max — most commonly used for fluid font-size, but it works for any length property like padding or width.
How do I generate a clamp() value from px sizes?
Enter your smallest size at your smallest viewport width and your largest size at your largest viewport width — this calculator converts those four numbers into a ready-to-paste clamp() expression in rem and vw.
Does this work as a clamp() generator for padding or spacing too?
Yes — although the preview shows text, the generated clamp() expression is just a length value, so you can paste it into padding, margin, width, or gap the same way you would for font-size.