CSS clamp() calculator

Enter the size you want on a small screen, the size you want on a large one, and the two viewport widths in between. The tool works out the clamp() value that draws a straight line between those two points, and shows what the size comes out to at seven common widths. The sample sentence in the preview is really styled with the generated value, so it changes as you resize the window.

Is my data uploaded anywhere?

No. Everything here is arithmetic done in your browser. The numbers you type are never sent to a server, and there is no account, no logging, and no network request behind the result.

How does the math work?

CSS clamp() takes three values: a minimum, a preferred value, and a maximum. The browser uses the preferred value, but never lets it fall below the minimum or rise above the maximum.

The preferred value is the interesting part. It has to be a size that grows with the viewport, which is what vw units do: 1vw is one percent of the viewport width. To go from 16px at a 320px viewport to 48px at 1280px, the size has to gain 32px over 960px of width, which is 0.0333px per pixel, or 3.3333vw. That slope alone would hit the wrong sizes though, so a fixed offset shifts the line into place. The result is clamp(1rem, 0.3333rem + 3.3333vw, 3rem), and the offset is why the middle term has two parts.

Numbers are rounded to four decimals and trailing zeros are dropped, so you get 1.5rem rather than 1.5000rem. Sizes are entered in pixels; switching the output unit to rem divides them by the root font size, which is 16px in every browser’s default settings.

What if the numbers do not make sense?

The tool tells you instead of quietly producing something wrong. If both viewport widths are the same there is no range to scale across, so the size stays flat and the vw term disappears. If the minimum and maximum sizes are equal, you get the same warning for the same reason.

The one worth watching is a minimum larger than the maximum. CSS resolves clamp() as max(MIN, min(VALUE, MAX)), so the minimum wins and the size is stuck there forever. Browsers do this silently. The preview table shows the pinned value and a warning explains it.

Where does this come up?

Headings that should be big on a desktop and readable on a phone, section padding that should not stay at 8rem on a 375px screen, gaps in a card grid, and hero text that needs to fill its space at any width.