CSS Clamp() Generator

CSS clamp(MIN, PREFERRED, MAX) returns the PREFERRED value but never lets it drop below MIN or rise above MAX. For fluid typography the trick is the middle argument: it must be a viewport-relative expression that, when evaluated, passes through MIN at your small viewport and MAX at your large one. This tool computes that expression with linear interpolation. It finds the slope between your two size/viewport points, slope = (maxSize - minSize) / (maxVw - minVw), converts it to a vw coefficient by multiplying by 100, and derives the px intercept where the line would cross a zero-width viewport. The output looks like clamp(16px, 11.4286px + 0.7143vw, 24px). Below the min viewport clamp() pins to 16px; above the max it pins to 24px; in between the value rises in a straight line. Because clamp() and vw are resolved by the browser, the size updates continuously as the window resizes, with no media queries. Note this generator emits px and vw units (not rem), assumes a single linear segment, and does not re-order arguments, so you must enter a max that is larger than the min and a max viewport larger than the min viewport for sensible output.