Fluid Typography & Spacing Clamp Generator
Works on any CSS property, not just font-size — padding, gap, border-radius, letter-spacing, line-height. Drag the curve itself (or the slider) to simulate a screen size, and watch exactly where you land.
What the CSS clamp() function is doing
clamp(min, preferred, max) locks a value between a floor and a ceiling while letting it flow smoothly in between, using a viewport-width unit for the preferred value. The generator solves for the slope and offset between your two size/viewport pairs so the value lands exactly on both endpoints — visualized directly on the curve graph above.
Fluid values for more than just type
The same clamp() math applies to padding, gap, border-radius, letter-spacing, and line-height just as well as font-size — switch the property above and the preview updates to demonstrate that specific property scaling, with output in either rem or px.