CSS clamp() Calculator

What this tool does

This CSS clamp calculator builds one font-size declaration from four pixel numbers: a minimum size, a maximum size, a minimum viewport width, and a maximum viewport width. The slope is (max size − min size) / (max viewport − min viewport). The intercept is min size − slope × min viewport. The vw coefficient is the slope times 100. The declaration is font-size: clamp(MINpx, calc(INTERCEPTpx + VWvw), MAXpx). Copy writes that declaration and nothing else.

The intercept and the vw coefficient are rounded to four decimal places, half up on the absolute value, and trailing zeros are removed. The declaration is built from those rounded numbers, so it can differ from the exact slope by less than half of a ten-thousandth in the displayed unit. A negative intercept is valid CSS and is shown with its minus sign. The page does not rewrite it into a different form.

If the minimum size is greater than the maximum size, Calculate fails and clears the result. It does not swap the fields. If the minimum viewport is greater than or equal to the maximum viewport, that is also an error and the fields stay as you typed them. An empty field, a word, a unit glued to the number, a negative size, a viewport below 1, a size above 10,000, or a viewport above 10,000 is an error. The previous declaration does not remain.

The declaration is text. It is not assigned to an element, and it is not written onto the document. This is not a Utopia type scale, not a container-query formula, and not a rem conversion. It is not the used value after a browser minimum font size, zoom, or a user stylesheet. There is no root font size on this page.

How to use

1. Type the minimum and maximum sizes in pixels.
2. Type the minimum and maximum viewport widths in pixels. The minimum viewport must be smaller than the maximum.
3. Choose Calculate, or press Enter in a field. Copy writes the declaration. Clear empties all four fields.

The result also shows the rounded intercept and the rounded vw coefficient so you can see the numbers inside the calc(). Those two lines are not part of the copy. The copy is the declaration alone.

Example

Minimum size 16, maximum size 32, minimum viewport 320, and maximum viewport 1280 produce intercept 10.6667 and vw coefficient 1.6667. The declaration is font-size: clamp(16px, calc(10.6667px + 1.6667vw), 32px);. The slope is 16/960, and 100 times that slope rounds to 1.6667. The intercept is 16 minus that slope times 320, which rounds to 10.6667.

Minimum 10, maximum 40, viewport 400 to 800 produces a negative intercept. The declaration is font-size: clamp(10px, calc(-20px + 7.5vw), 40px);. Equal sizes of 16 across viewports 320 and 1280 produce font-size: clamp(16px, calc(16px + 0vw), 16px);. Size 32 then 16 is an error, and the page does not silently emit the swapped pair. Viewport 1280 then 320 is an error for the same reason.

Limits

• Four pixel numbers. Sizes 0–10,000. Viewports 1–10,000. Minimum viewport must be less than maximum viewport.
• One linear formula. Not Utopia, not rem, not em, and not the browser’s used value.
• The declaration is text. It is not applied to this page. Inverted ranges are not swapped.

Nothing is sent or stored. If a design tool uses a different rounding rule or a different preferred-value formula, its declaration can differ. This page always uses the slope and intercept above, rounded to four decimal places.