CSS Clamp Calculator
Generate fluid-typography clamp() values from two viewport sizes. Live preview at any viewport width.
font-size: clamp(1rem, 0.75rem + 1.1111vw, 1.75rem);
About the CSS Clamp Calculator
The CSS Clamp Calculator turns two font sizes and two viewport widths into a single clamp() value for fluid typography. Instead of stacking media queries to bump a heading from 16px on phones to 28px on desktops, you get one line that scales smoothly between those points. You set the small size, the large size, and the widths where each applies, and the tool handles the math for the middle.
You type four numbers: min size and max size in px, plus min viewport and max viewport in px. The tool computes the slope between your two points, converts it to a vw value, and finds the intercept so the line passes through both ends. Pick rem or px for the output; in rem mode a root size field divides px values so 16px becomes 1rem.
The clamp expression is calculated in the page as you adjust the values, with no signup and nothing to install. Nothing you type is sent anywhere. A range slider lets you drag through viewport widths and watch a sample line resize in real time, with a readout showing the exact pixel size at the width you picked. When it looks right, the Copy CSS button puts the full declaration on your clipboard.
How to use the CSS Clamp Calculator
- 1Enter your Min size (px) and Max size (px), the two font sizes you want at the small and large ends.
- 2Set Min viewport (px) and Max viewport (px) to the screen widths where those sizes should lock in.
- 3Choose rem or px with the Output unit buttons; in rem mode, set Root size (px) to match your document root.
- 4Drag the Live preview slider to sweep across viewport widths and watch the sample text resize.
- 5Read the size readout above the slider to confirm the pixel value at any width you land on.
- 6Click Copy CSS to copy the full font-size: clamp(...) declaration to your clipboard.
What you can use it for
Fluid headings
You want an h1 that reads 24px on a 360px phone and 48px on a 1440px desktop without three media queries. Enter those four numbers, copy the value, and paste it into your h1 rule. One line replaces the breakpoint stack.
Design token in rem
Your design system stores type scale in rem so it respects user font settings. Switch the output to rem, set Root size to 16, and the tool converts every px input into rem values, ready to drop into a token file.
Checking the middle
A clamp looks fine at both ends but you are unsure about tablets. Drag the preview slider to 768px and read the exact size. If the text feels too small there, nudge your min or max size and watch it shift.
How the clamp math works
clamp(MIN, PREFERRED, MAX) returns the preferred value but never lets it fall below MIN or rise above MAX. For fluid type the preferred value must be a straight line that equals your min size at the min viewport and your max size at the max viewport. The tool finds it from the slope, the px change in size per px of viewport width.
Because CSS expresses viewport-relative growth in vw, where 1vw is one percent of the viewport, the tool multiplies the slope by 100 for the vw coefficient. It then solves the intercept, minSize - slope * minVw, so the line passes through your lower point. That expression, clamped between your sizes, replaces several media queries.
Frequently asked questions
Does this send my numbers to a server?
No. Every calculation runs in your browser with local JavaScript, and there is no network request when you type or copy. The clamp value is computed on the page and Copy CSS writes to your clipboard directly. Once loaded, the tool works offline.
Why does the copied line start with font-size?
The output box and the Copy CSS button both include the font-size: prefix, so you paste a complete declaration. To use the clamp for another property like padding or gap, copy the line and replace font-size. The clamp() itself works on any length value.
What is the Root size field for?
It only appears when the output unit is rem. The tool divides your px inputs by this number, so with a root of 16 a 16px min size becomes 1rem. Set it to match the font-size on your html element. In px mode the field is hidden.
What if the min and max viewport are the same?
Avoid it. The slope is (maxSize - minSize) divided by (maxVw - minVw), so equal viewport widths divide by zero and the vw term becomes invalid. Keep the max viewport larger than the min, which is the normal small-to-large screen range anyway.
Can I use a larger min size than max size?
Yes, and it produces a valid clamp that shrinks as the viewport grows, since the slope goes negative. The middle value still interpolates between your two points. Just confirm that matches your intent, because most fluid type grows rather than shrinks with wider screens.