Turn a size at a phone width and a size at a desktop width into one fluid clamp() value
Runs in your browser. Nothing you type is sent anywhere. Checked against sources on 17 Oct 2026.CSS clamp(MIN, VAL, MAX) keeps a value between a minimum and a maximum. For fluid type, VAL is a straight line such as 0.8043rem + 0.8696vw, which goes from 16px on a 360px screen to 24px on a 1280px screen. This generator works out that line from your two sizes and two screen widths.
Enter the size you want on a small screen and the size on a large screen.
Set the two screen widths where the size should stop growing or shrinking.
Copy the clamp() value; it grows in a straight line between the two widths.
Check the table of sizes at common screen widths, or build a whole type scale.
Fluid sizing replaces a stack of media queries with one value: text, spacing or a gap that grows smoothly with the screen and stops at the sizes you choose. The arithmetic is simple but fiddly, which is why most people copy it from a calculator.
How the value is built. Give the size at a small screen width and at a large one. The line through those two points has a slope, in px per px of screen width, and an intercept, the size it would have on a 0px screen:
| Part | Formula | 16px at 360px to 24px at 1280px |
|---|---|---|
| Slope | (max size - min size) / (max width - min width) | 8 / 920 = 0.8696vw |
| Intercept | min size - slope x min width | 12.87px = 0.8043rem |
| Result | clamp(min, intercept + slope, max) | clamp(1rem, 0.8043rem + 0.8696vw, 1.5rem) |
The browser computes max(MIN, min(VAL, MAX)), as CSS Values 4 defines clamp(), so below 360px the size stays at 16px and above 1280px at 24px.
Why rem. The sizes and the intercept are written in rem, relative to the root font size, so the text still follows a reader who sets a larger default font. A size written only in vw would ignore that setting. Choose px output if your design system works in pixels.
Shrinking values. A size can also get smaller as the screen widens, for example the padding of a card; the line then has a negative slope and the generator writes a minus sign.
Type scale. Pick a ratio for small screens and one for large screens, and every step from small print to the largest heading gets its own clamp(), copied as CSS custom properties.
The table under the result shows the size at common widths from 320px to 1920px. Every value was checked against 320 cases solved with exact fractions. Nothing is sent anywhere.
clamp(MIN, VAL, MAX) gives VAL, unless VAL is smaller than MIN or larger than MAX, in which case it gives the limit. For fluid text VAL grows with the screen width, such as 0.8043rem + 0.8696vw, so the font scales smoothly and stops at the minimum and maximum sizes you chose.
Divide the size difference by the screen-width difference to get the slope, multiply it by 100 for the vw figure, and subtract slope times the small width from the small size to get the intercept. From 16px at 360px to 24px at 1280px that gives 0.8043rem + 0.8696vw.
A rem value scales with the root font size, which follows the reader's browser setting, so people who enlarge their default text still get larger text. Pixels and vw ignore that setting. Writing the minimum, maximum and intercept in rem keeps fluid type accessible while the vw part adds the growth.
A set of text sizes, from small print to the largest heading, where each step is the previous one multiplied by a ratio, and each size is fluid. Using a smaller ratio on phones and a larger one on desktops, such as 1.2 and 1.25, keeps headings readable on narrow screens and striking on wide ones.
Yes. clamp() works in any property that takes a length, such as padding, margin, gap, width or border-radius. Enter the spacing you want on a small and a large screen, choose the Property field, and copy the line; a gap of 16px on phones and 48px on desktops then grows smoothly in between.
Yes. When the size on the large screen is smaller than on the small screen, the slope is negative and the value reads like 2.5rem - 2vw. The minimum and maximum are swapped into the right order automatically, so the value still stays between the two sizes you entered.
Rates and rules change; check the source before you rely on a figure.
Still stuck? Ask about CSS Clamp Generator and anybody who knows can answer. No account needed.
On the related tools: Cron Expression Generator – Generate a cron expression by choosing when the job should run · Sitemap Index Generator – Split a large site into numbered sitemaps with an index file · Google Analytics URL Builder – The five utm parameters GA4 reads, with the naming traps flagged.