CSS clamp() Generator for Fluid Typography
Generate a responsive CSS clamp() for fluid font sizes and spacing from min/max size and viewport values — runs 100% in your browser, no upload.
Fluid CSS clamp() generator
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
🔒 Generated in your browser — nothing is uploaded.
What this CSS clamp() generator does
Enter a minimum and maximum size in pixels, the viewport widths where each size should apply, and your root font size, and this tool builds a ready-to-paste clamp() value for fluid typography or spacing. It computes the linear slope between your two breakpoints, converts pixels to rem using your root font size, and outputs clamp(minRem, yRem + slopeVw, maxRem). The result scales smoothly with the viewport and clamps at your chosen bounds — no media queries required.
How the math works
The slope is (maxPx - minPx) / (maxVw - minVw), expressed as a vw unit so the value grows with the viewport width. The intersection term, -minVw * slope + minPx, is the fixed rem offset that anchors the line so it passes through your minimum size at the minimum viewport and your maximum size at the maximum viewport. Values are rounded to four decimals to stay accurate without bloating your CSS. Below the minimum viewport the size holds at the minimum, and above the maximum viewport it holds at the maximum.
Frequently asked questions
Why does the tool convert pixels to rem?
Using rem for the clamped bounds keeps your fluid sizes tied to the user's root font size, which respects browser and accessibility zoom settings. The pixel inputs are just an easy way to describe the design; the output is expressed in rem and vw.
Do I still need media queries?
No. A single clamp() value scales the size continuously between your min and max viewports and locks at the bounds outside that range, so you usually do not need breakpoint media queries for that property.
Is anything I type uploaded to a server?
No. All the math runs locally in your browser with JavaScript. The sizes, viewport widths and generated clamp() value are never sent, stored or uploaded anywhere.