CSS Clamp() Generator
Set a minimum and maximum size and the viewport range they apply over, get a fluid
clamp() value that scales smoothly between them.
How it works
The two (viewport, size) points define a straight line. Its slope becomes the
viewport-width coefficient, and its y-intercept becomes a fixed rem offset, together
forming clamp(min, intercept + slope*100vw, max). Because that's real CSS,
not a JavaScript resize listener, the browser recalculates it on every layout pass with
no scroll jank or flash of the wrong size, and it keeps working even with JavaScript
disabled.
All values are converted to rem using your root font size, so the result still scales correctly if a user has changed their browser's base font size for accessibility. Nothing here reads your page, it only computes the formula from the numbers you enter.
Common questions
What is clamp() actually doing?
clamp(min, preferred, max) picks the middle value, but clips it to never go below min or above max. Here the "preferred" value is a linear function of viewport width, so the result grows smoothly with the screen until it hits either bound, then holds steady.
Why use this instead of a media query?
A media query jumps between fixed sizes at specific breakpoints, which can look like a visible snap. clamp() scales continuously with the viewport, so text and spacing resize smoothly as the window is dragged, with no breakpoint to maintain.
Is this sent anywhere?
No, the formula and preview are computed entirely in your browser. Nothing is uploaded.