CSS Clamp Calculator
Turn a min and max size plus two viewport widths into a fluid CSS clamp() value, computed live in your browser.
The CSS Clamp Calculator runs entirely in your browser. The viewport widths, sizes, and root font size you enter never leave your device and nothing is uploaded to ArrayKit.
Open the CSS Unit Converter
About CSS Clamp Calculator
The CSS Clamp Calculator turns four numbers — a min and max size in pixels plus the two viewport widths they map to — into a ready-to-paste clamp() value for fluid typography and spacing. It fits a straight line between your two anchor points, works out the vw slope and the rem intercept, and pins the result to your min below the small viewport and your max above the large one. A live preview slider shows the exact rendered size at any width in between, so you can eyeball the ramp before shipping it. Copy the raw clamp() value, a font-size declaration, or a Tailwind arbitrary value. Everything is computed on your device — the sizes you type stay in the browser and nothing is uploaded to ArrayKit.
Features
- Generate a clamp(minRem, slopeVw + interceptRem, maxRem) value from four numbers
- Live preview slider shows the rendered size at any viewport width
- Set your own root font size to control the px → rem conversion
- Read out the exact vw slope and rem intercept behind the value
- Copy the raw clamp() value, a font-size declaration, or a Tailwind class
- Presets for body text, headings, hero type, and fluid spacing
- Handles descending ramps where the size shrinks as the viewport grows
- Runs entirely in your browser with no sizes sent anywhere
How to use the CSS Clamp Calculator
- Enter your min and max viewport widths in pixels
- Enter the min and max sizes the element should reach at those widths
- Adjust the root font size if it is not the default 16px
- Drag the preview slider to check the rendered size across the range
- Copy the clamp() value or the CSS declaration into your stylesheet
Example
Input
min viewport 320px, max viewport 1200px
min size 16px, max size 24px, root 16px
Output
font-size: clamp(1rem, 0.8182rem + 0.9091vw, 1.5rem);
16px at 320px grows to 24px at 1200px and holds flat outside that band.
Common errors & troubleshooting
- The text never grows past the min size. — Check that the min viewport is smaller than the max viewport — a reversed range flattens the ramp so the preferred term never wins between the bounds.
- Sizes look off after changing the root font size. — clamp() rems are relative to the root. If your page sets html { font-size } to something other than 16px, match the root field so the rem output resolves to the pixels you expect.
- The value scales too aggressively on very wide screens. — The middle term keeps rising until the max viewport. Lower the max viewport width or the max size so the ramp reaches its ceiling sooner and stays capped beyond it.
- clamp() is ignored in an older browser. — clamp() is widely supported in modern browsers. For very old targets, provide a static font-size first as a fallback and let clamp() override it where supported.
Frequently asked questions
- How does a CSS clamp calculator compute the vw slope?
- It draws a line through your two anchor points: slope = (maxSize − minSize) / (maxViewport − minViewport). Because 100vw equals the viewport width, the vw coefficient in the value is that slope multiplied by 100, and the rem intercept is what is left when the line is extended back to a zero-width viewport.
- Why does the middle term mix rem and vw?
- The preferred value is a straight line: a fixed part that does not depend on width (the rem intercept) plus a part that grows with the viewport (the vw slope). Mixing the two lets the size scale smoothly between your min and max instead of jumping at a breakpoint.
- Should I use px or rem in the clamp bounds?
- rem bounds respect the user's browser font-size setting, which is better for accessibility, so this tool outputs rem by default. You can switch the readout to px, but rem clamp bounds are the safer choice for text sizing.
- Can I use the same clamp() value for margins and gaps?
- Yes. clamp() works for any length, so the value applies to padding, margin, gap, and grid tracks as well as font-size. Use the fluid spacing preset as a starting point and adjust the min and max sizes.
- What root font size should I enter?
- Use whatever your page sets on the html element — 16px is the browser default and the tool's default. If you scale the root elsewhere, enter that value so the rem output maps to the pixels you actually see.
- Are the sizes I type uploaded anywhere?
- No. The CSS Clamp Calculator runs entirely in your browser. The viewport widths and sizes you enter are used only to compute the value on your device and are never sent to ArrayKit.
Related tools
- CSS Unit Converter — Convert between px, rem, em, pt and % live with a configurable root font size.
- CSS Grid Generator — Build CSS grid layouts visually and copy grid-template-columns, rows and gap.
- CSS Color Converter — Convert between HEX, RGB and HSL with a live swatch.
- Contrast Checker — Check WCAG colour contrast ratio and AA/AAA pass for any two colours.
- Tailwind Color Generator — Generate a full 50-950 Tailwind color scale from one brand color, with config-ready output.
- Cubic Bezier Generator — Design a cubic-bezier() easing curve with draggable handles and an animated preview.
All ArrayKit tools