Generate a fluid, responsive CSS clamp() value that scales smoothly between a minimum and maximum size across any viewport range.
clamp() takes a minimum, preferred, and maximum value, letting a property (like font-size) scale fluidly with the viewport while never going below the minimum or above the maximum.
clamp() scales smoothly and continuously with viewport width, avoiding the abrupt jumps that occur at media query breakpoints, and requires far less CSS code.
Yes, clamp() has excellent support in all modern browsers (Chrome, Firefox, Safari, Edge) released since 2020.
Yes, the same clamp() value works for any CSS length property — padding, margin, gap, and width all benefit from fluid scaling too.
This tool calculates a CSS clamp() value that smoothly scales a font size (or any length property) between a minimum and maximum, based on the viewport width — creating fluid, responsive typography without needing multiple media query breakpoints.
The clamp() function takes three values: a minimum, a preferred value (usually involving a viewport-relative unit like vw), and a maximum. The browser evaluates the preferred value and clamps it — capping it at the minimum if it would go lower, or the maximum if it would go higher. The preferred value is calculated using linear interpolation between your two size/viewport pairs, meaning the value changes smoothly and proportionally as the viewport resizes, rather than jumping between fixed sizes at breakpoints.
This tool calculates the linear equation connecting your minimum size at your minimum viewport, and maximum size at your maximum viewport, then expresses that equation using rem and vw units — the standard, accessible approach for fluid typography that respects user font-size preferences (since rem scales with the user's base font size) while still responding to viewport width.
All calculations happen directly in your browser — nothing is sent to a server.