CSS Clamp() Generator
Set a minimum and maximum size across two viewport widths and get a fluid clamp() value that scales in between.
About the CSS Clamp() Generator
The output uses the standard fluid-sizing formula: a slope is calculated from how much the value needs to grow between the two viewport widths, then that slope becomes a vw coefficient plus a fixed offset, wrapped in clamp(min, preferred, max) so the browser never has to run a media query to update it. Drag the viewport slider to watch the preview element grow smoothly between the min and max values you set, and flip to rem if your project bases spacing on the root font size instead of raw pixels.
The math behind the "preferred" middle value
A clamp(min, preferred, max) call needs that middle argument to be a formula, not a fixed number, one that produces exactly min at your minimum viewport width and exactly max at your maximum viewport width, scaling linearly in between. This tool derives it the same way the well-known "fluid typography" calculators do: it treats the relationship as a straight line, computes the slope as (maxValue - minValue) / (maxViewport - minViewport), the rate of change per pixel of viewport width, then solves for where that line would cross zero viewport width (the y-intercept) using -minViewport × slope + minValue. The intercept becomes the fixed offset, and the slope, multiplied by 100, becomes the coefficient in front of vw, since 1vw is defined as 1% of the viewport width, multiplying a per-pixel slope by 100 converts it into a per-vw rate.
Why clamp() instead of a plain vw value
A bare font-size: 4vw scales forever in both directions, it will shrink to an unreadable few pixels on a tiny phone and balloon absurdly large on an ultrawide monitor, because it has no floor or ceiling. Wrapping the fluid formula in clamp() fixes both ends: below your minimum viewport width, the value locks to the min argument; above your maximum viewport width, it locks to the max argument; only between those two widths does it interpolate along the calculated line. That's also why this tool's live simulator visibly stops changing the preview text size once you drag the viewport slider past either edge of your configured range.
What the viewport simulator is actually doing
Rather than requiring you to resize your actual browser window to test the effect, the simulator recalculates the same linear formula at whatever width the slider is set to and applies the resulting size directly to the preview element with inline styles, using the same Math.min(max, Math.max(min, ...)) clamping logic the browser's real clamp() function performs internally. The preview frame's own pixel width is also capped at 900px purely for layout purposes (so the demo box doesn't overflow the tool's container), it doesn't affect the math, only the visual framing.
Why rem output needs a base font size field
When you switch the output unit to rem, the min and max pixel values you entered get divided by the base font size field (16 by default, matching virtually every browser's default root font size) to convert them into rem units before the slope and intercept are calculated. Using rem instead of px for fluid typography has a real accessibility benefit: a user who has increased their browser's default font size in their settings will see your clamp-based text scale up proportionally, since rem is relative to the root element's font size, whereas a pure px value ignores that user preference entirely.
A real limitation: no fallback in unsupporting browsers
If a browser doesn't recognize the clamp() function at all, the entire CSS declaration containing it is treated as invalid and dropped, not just the fluid part, meaning the property gets no value whatsoever rather than silently falling back to the min or max number. In practice this is a minor concern today since clamp() has been supported in every major browser since roughly 2020 (Safari 13.1+, Chrome 79+, Firefox 75+), but if you need to support noticeably older browser versions, you should place a plain fallback declaration for the same property immediately before the clamp() one, since CSS lets a later valid declaration for the same property override an earlier one without breaking unsupporting browsers.
Frequently Asked Questions
How is the vw coefficient in the middle of the clamp() value calculated?
It's the slope of a straight line drawn between your minimum value at the minimum viewport width and your maximum value at the maximum viewport width, expressed as change per pixel, then multiplied by 100 to convert it into a per-vw rate, since 1vw equals 1% of the viewport width.
Why use clamp() instead of just a vw-based font size?
A plain vw value scales without limit, becoming unreadably small on narrow screens and excessively large on wide ones. clamp() adds a floor and ceiling, so the value only scales fluidly between your chosen minimum and maximum viewport widths and locks in place outside that range.
Do I need to actually resize my browser to test the effect?
No, the built-in viewport simulator slider recalculates the same fluid formula at any width you choose and applies it live to the preview text, using the identical clamping logic the browser runs internally, so you can preview the full range without resizing anything.
Why does switching to rem require a base font size?
rem units are relative to the root element's font size, so your pixel min/max values need to be divided by that base (16px by default) before the fluid formula runs. Using rem instead of px also means the text respects a user's browser-level font size preference, which px values ignore.
What happens in browsers that don't support clamp()?
The whole CSS declaration is dropped, not just the fluid portion, so the property gets no value at all. This mainly affects very old browsers, since clamp() has been supported in all major browsers since around 2020; if you need older support, add a plain fallback value for the same property directly before the clamp() line.
Can I use this for spacing and layout properties, not just font size?
Yes, the Property dropdown includes padding and width alongside font-size, and the same clamp() formula works for any numeric CSS property. The underlying math doesn't care what property it's attached to, only the min, max, and viewport values you supply.