CSS clamp() Calculator
Turn two viewport breakpoints and two sizes into one fluid clamp() value for type or spacing — in px or rem, with the vw-coefficient math shown and a live viewport preview.
Output unit & root size
Viewport range (px)
Value range
clamp() value
Live preview
Everything runs on your device. The clamp math is plain arithmetic in this tab and the preview is computed live from your numbers — no uploads, no server, works offline.
Offline later: once you have opened this page with a connection, it reopens and works with none — your browser keeps a copy. Not saved: the very first Polyatic page you ever open (open it again while online), and any page or link you have never opened.
How the clamp() value is derived — the exact math
Fluid sizing draws a straight line between two anchor points: the value you want at a small viewport and the value you want at a large one. Between them, clamp(MIN, PREFERRED, MAX) follows that line; outside them it holds flat at MIN or MAX. The whole job is finding the two numbers in the middle term.
The slope is the rise over the run: (maxValue − minValue) / (maxViewport − minViewport). The vw coefficient is that slope times 100, because 1vw is 1% of the viewport, so 100vw is the full viewport width. The constant is solved so the line passes exactly through the minimum point: constant = minValue − slope × minViewport.
Worked example — 16px at a 320px viewport up to 24px at 1200px: slope is (24 − 16) / (1200 − 320) = 8 / 880 = 0.0090909, so the coefficient is 0.9091vw and the constant is 16 − 0.0090909 × 320 = 13.0909px, giving clamp(16px, 13.0909px + 0.9091vw, 24px). Plug the 320px viewport back in and the middle term returns exactly 16px; plug 1200px in and it returns exactly 24px. The numbers here are rounded to four decimal places — well under one CSS pixel of error across any real screen.
px or rem — and why the vw coefficient never changes
The same inputs in rem (at a 16px root) give clamp(1rem, 0.8182rem + 0.9091vw, 1.5rem). Notice the 0.9091vw is identical: the coefficient is a percentage of the viewport, so it is unit-independent — only the constant differs (13.0909px is 0.8182rem). For font sizes, prefer rem: a px clamp ignores the reader's browser font-size preference, while rem respects it, which matters for accessibility.
| Inputs (16→24px, 320→1200px) | Output |
|---|---|
| px | clamp(16px, 13.0909px + 0.9091vw, 24px) |
| rem (root 16) | clamp(1rem, 0.8182rem + 0.9091vw, 1.5rem) |
Honest limits
clamp() is a layout convenience, not a cure-all. A size driven purely by vw can fail WCAG 1.4.4 (text must stay usable at 200% zoom) because zooming does not change viewport units; keeping part of the expression in rem and setting a sensible minimum both help, but there is no substitute for testing at real zoom. This tool draws a linear ramp only — it does not do multi-stop or non-linear curves, and it clamps at the two breakpoints you give rather than at device media queries. If your min and max values are equal it returns a plain constant (nothing to scale), and if your two viewports are equal the slope is undefined, so it declines to guess and says so.