How to use the CSS Clamp Calculator
1. Set the minimum and maximum values for your property (e.g., 16px at mobile, 32px at desktop).
2. Set the viewport width breakpoints where these values apply.
3. Copy the generated clamp() CSS — the value scales smoothly between your min and max values.
What is it?
The CSS clamp() function enables fluid/responsive sizing that smoothly scales between a minimum and maximum value based on the viewport width. Instead of using media query breakpoints (which create sudden jumps), clamp() creates a perfectly smooth linear interpolation between two sizes. This is especially powerful for typography — headlines scale gracefully from mobile to desktop without any jarring size changes.
The mathematical formula behind clamp() uses a linear equation: the slope is calculated from your min/max values and viewport widths, and the intercept ensures the value exactly matches your minimum at the smallest viewport. The result is a future-proof, single-line CSS value that replaces multiple media queries.
Example
Min: 1rem (16px) · Max: 3rem (48px) · Viewport: 320px–1280px
font-size: clamp(1rem, calc(1rem + 2.083vw), 3rem);
At 320px the font is 16px. At 1280px it's 48px. Between those viewports it scales fluidly.
Benefits
Generate fluid typography and spacing without media queries
clamp() produces values that scale smoothly from mobile to desktop — one declaration replaces multiple breakpoint overrides.
Calculate clamp() parameters from your mobile and desktop design values
Input your minimum and maximum sizes and viewport widths — the tool computes the correct clamp() expression.
Replace fixed breakpoints with a single responsive value
One clamp() expression covers the entire responsive range — no min, preferred, and max declarations at separate breakpoints.
Understand what value is computed at any viewport width
See the computed output at specific screen widths to confirm the scaling behaviour matches your design intent.
Frequently asked questions
What does clamp(min, preferred, max) mean?
clamp() takes three values: minimum, preferred, maximum. The browser uses the preferred value (the vw + rem calculation) but never goes below minimum or above maximum. It clamps the preferred value within the min-max range.
Why use rem in the calculation?
rem units scale with the user's font size preferences (accessibility). Using rem in the intercept instead of px means the calculation respects user-defined browser font sizes, making the result more accessible.
Can I use clamp() for things other than font-size?
Yes — clamp() works for any numeric CSS property: padding, margin, gap, width, height, border-radius, etc. Use the Property dropdown to select what you're sizing. The same mathematical approach applies to all of them.