CSS Clamp Calculator for Fluid Sizing
Set the two size endpoints and their viewport bounds. Adjust the preview width to inspect the fluid value between those limits.
Runs locally in your browser · clamp() · vw · rem
Set the two size endpoints and their viewport bounds. Adjust the preview width to inspect the fluid value between those limits.
Runs locally in your browserThe calculator turns two size endpoints and the viewport widths where they apply into a single clamp() expression. It writes the rule for font-size, padding, gap or margin, previews the value at any width inside the range and copies the finished CSS. All of it runs in the page.
The preview does not resize your window: the slider simulates a viewport width and the demo element receives the same px value the expression would resolve to at that width. Below the smaller viewport the browser holds the minimum size, above the larger one it holds the maximum.
The expression is the straight line between the two endpoints. With the defaults the slope is (32 − 16) ÷ (1440 − 320) × 100 = 1.4286vw and the intercept is 16 − 1.4286 × 320 ÷ 100 = 11.4286px, so the rule reads clamp(1rem, 0.7143rem + 1.4286vw, 2rem).
At 960 px the middle term resolves to 0.7143rem + 1.4286vw = 25.14px, which is what the readout and the preview element show. Terms are rounded to four decimals and the displayed value to two.
With the unit set to rem every length in the expression is divided by the root font size: at the default 16 px the 16 → 32 px range becomes 1rem → 2rem, while a root of 20 turns the same range into 0.8rem → 1.6rem. The vw coefficient is not converted, because a vw is a fraction of the viewport and not of the root.
The root field is a conversion constant, not a setting sent to the browser. The rendered size only matches the preview when the field matches the html font-size of the page the rule lands in.
Sizes accept decimals and must be 0 or greater; the maximum must not be smaller than the minimum, and the larger viewport must be greater than the smaller one. Equal endpoints are allowed and produce a flat rule such as clamp(1rem, 1rem + 0vw, 1rem).
An impossible range or an empty size or viewport field clears the rule, the sample chips, the readout and the preview, and disables Copy CSS until the range is valid again, so the clipboard never receives a rule that does not match the fields on screen. The root field is required only while the output unit is rem.