CSS Clamp Calculator
Fluid type without guessing the middle value.
CSS Clamp Calculator
Slope (vw) = (max size - min size) / (max viewport - min viewport) x 100; intercept = min size - slope x min viewport / 100.
Calculated instantly
Embed this calculator
Put this calculator on your own site with the snippet below. The frame contains the tool only, reports its own height, and carries a visible link back to the full page. Embedding is free; keep the attribution link as it is, and do not wrap the frame in a way that hides it.
Preparing the embed code for this page...
What This Calculator Does
The CSS Clamp Calculator converts a minimum and maximum size at two viewport widths into the slope and intercept of a fluid clamp() expression. It also previews the rendered size at a chosen viewport, so you can check the middle of the range instead of only the endpoints.
How It Works
The size difference is divided by the viewport difference to get the growth per pixel, then multiplied by 100 to express the slope in viewport width units. The intercept is the minimum size minus the slope applied at the minimum viewport. The preferred value inside clamp() is the intercept plus the slope, and the browser clamps it between the minimum and maximum. The preview applies the same linear interpolation and clamps the result.
Example
For 16 px at 320 px and 24 px at 1200 px, the slope is 8 / 880 x 100 = 0.909vw. The intercept is 16 - 0.00909 x 320 = 13.09 px, or 0.818rem. At a 768 px viewport the size is 16 + 8 x 448 / 880 = 20.07 px. The CSS is clamp(1rem, 0.818rem + 0.909vw, 1.5rem).
Formula
(max size - min size) / (max viewport - min viewport) x 100min size - slope x min viewport / 100intercept + slopeclamp(min size, preferred, max size)Reading the Results
Size at preview viewport
The interpolated size after clamping. It should match what the browser renders at that width if no other rule overrides it.
Fluid slope
The viewport-width coefficient. A larger slope makes the size change faster across the range and can feel jumpy on small screens.
Preferred intercept
The fixed part of the preferred value in pixels. Convert it to rem by dividing by the root font size before writing the CSS.
Sources and References
MDN Web Docs - clamp()
CSS clamp function syntax and behaviour
Defines clamp as a minimum, preferred, and maximum value with comparison rules.
W3C WCAG 2.2 - Success Criterion 1.4.4 Resize Text
Text resize to 200 percent without loss of content
The accessibility reason to keep type relative and test at zoom.
References identify the method or data behind this calculator. Where a standard or tariff changes, the current edition applies, and the assumptions stated above take precedence over a remembered figure.
Frequently Asked Questions
What does clamp() do in CSS?
clamp(min, preferred, max) returns the preferred value, but never less than the minimum or more than the maximum. It is commonly used for fluid type: the preferred value scales with the viewport, while the min and max stop it from becoming unreadably small or absurdly large.
How do I convert the intercept from px to rem?
Divide by the root font size, normally 16 px. An intercept of 13.09 px is 0.818rem. Keep the min and max in rem as well so the whole expression respects the user font size setting, and use the rem-to-px calculator to check the values.
Why is my clamp() not changing with the viewport?
The preferred value may be outside the min or max for that width, or a more specific rule may be overriding it. Check the computed style in devtools. Also confirm the slope uses vw units and that the container is not constraining the layout in a way that makes the viewport irrelevant.
Should I use vw or a container query unit?
Viewport units are simple and widely supported, but they scale with the browser window rather than the component. If the same card appears in a narrow sidebar and a wide main column, container query units can be more appropriate. The arithmetic for the slope is the same, with the container width in place of the viewport.
Is fluid type bad for accessibility?
Not if it is done with relative units and tested at zoom. The risk is a clamp with pure px values that ignores the user font size, or a maximum so large that text overflows. Keep body text at least 16 px, allow reflow, and test at 200 percent zoom.