How to use it
- Choose the Property and type the Smallest size and the Largest size, then pick the Unit of the sizes.
- Enter the two widths in Viewport width where the size is smallest and Viewport width where the size is largest, and pick their unit.
- If you used rem anywhere, check the Root font size (px). Browsers use 16 px unless the site sets another size.
- Copy the CSS declaration, or check the Working and the Size at common widths to see the result at each width.
How clamp() makes a size fluid
clamp(MIN, VAL, MAX) takes a minimum, a preferred value and a maximum. The CSS Values and Units specification says it represents exactly the same value as max(MIN, min(VAL, MAX)). The size therefore never falls below MIN or rises above MAX, and in between it follows VAL, which here is a straight line that depends on the viewport width.
The line runs from the smallest size at the smallest viewport width to the largest size at the largest viewport width. Outside those two widths the size stays put.
slope = (largest size - smallest size) / (largest viewport - smallest viewport); intercept = smallest size - slope x smallest viewport; preferred value = intercept + slope x 100vwSlope, intercept and the vw term
The slope is how much the size grows for each pixel of viewport width. The intercept is where the same line meets a viewport width of zero. A vw unit is one per cent of the viewport width, so the slope multiplied by 100 gives the term that follows the window.
Both viewport widths and both sizes are worked out in pixels before the slope is found. A rem value is multiplied by the root font size, so the same design gives the same result in rem or in px when the root is 16 px.
- Keep the largest size at or above the smallest. The tool refuses a smaller largest size, because such a line would shrink as the screen grows.
- A vw term does not follow the visitor's text size setting, but a rem intercept does. Test the page at 200 per cent zoom, and keep the intercept in rem where you can.
Worked example: a font from 16 px to 24 px
Between a 320 px viewport and a 1200 px viewport, the font grows from 16 px to 24 px. The slope is (24 - 16) / (1200 - 320) = 8 / 880, which is 0.0091 to four decimals. The intercept is 16 - 0.0091 x 320 = 13.0909 px, and the viewport term is 0.9091 vw.
The value is clamp(16px, 13.0909px + 0.9091vw, 24px), so the CSS declaration is font-size: clamp(16px, 13.0909px + 0.9091vw, 24px);. With rem units, 1rem to 1.5rem between 20rem and 75rem and a root of 16 px gives clamp(1rem, 0.8182rem + 0.9091vw, 1.5rem).
Frequently asked questions
What happens to the size when the viewport is narrower than the smallest width?
The size stays at the smallest size. The clamp() formula never lets the value fall below its minimum, so the text keeps the size you set for the narrowest width.
Why is the viewport part written in vw?
A vw unit is one per cent of the viewport width, so it changes as the browser window changes size. A pixel or rem value would not change with the window, and the size could not follow it.
Why does the code sometimes put the vw part first?
When the intercept is negative, the code writes the vw part first and subtracts the intercept, which reads more clearly. Both forms give the same value.
Can I use the value for padding, margin or gap?
Yes. Choose padding, margin or gap under Property. The same line works for any length, so the spacing grows with the viewport in the same way as a font size.
Which browsers support clamp()?
All current major browsers support clamp(). If your visitors use older versions, check the page in those versions before you rely on the fluid size.
Is anything I enter saved or sent to a server?
No. The value is calculated in your browser, and nothing you type is stored or sent to our server. Copy the declaration before you leave the page.
Sources
- W3C: CSS Values and Units Level 4, clamp()
- W3C: CSS Values and Units Level 4, viewport-relative lengths
- MDN: clamp()
Figures and text last checked on Tuesday, November 10, 2026.