What the CSS Clamp Calculator does
This clamp calculator turns two sizes and two viewport widths into a CSS clamp() expression that grows (or shrinks) in a straight line between them and stays fixed outside that range. It shows the slope and intercept behind the numbers, a chart and table of the resolved value at common screen widths, and - for font sizes - whether browser zoom can still enlarge the text to 200%.
It suits any length that should scale with the screen: headings, section padding, gaps, border radii. The arithmetic is done in your browser and is shown in full, so you can check or adjust it rather than trusting a magic number.
How to use it
- Enter the value you want on a small screen and on a large one, in CSS pixels.
- Enter the viewport widths where scaling should start and stop, for example 360px and 1280px.
- Choose rem output (recommended, so a reader's larger default font size is respected) or px, and set the root font size if your stylesheet changes it.
- Optionally name the property, such as
font-size,padding-blockor a custom property like--space-l, so the copied rule is ready to paste. - Read the zoom check and the table, then copy the declaration, the bare clamp() value, or a CSV of values.
Reading the results
The middle part of clamp() is the preferred value: an intercept in rem plus a slope in vw. Between the two viewport widths it hits your two numbers exactly; below and above them the minimum and maximum take over.
The slope in vw is the change per 100 px of viewport width expressed as a percentage: 1.7391vw means the value grows by about 1.74 px for every 100 px wider the viewport gets.
The zoom check models page zoom from 100% to 500%. Zooming shrinks the CSS viewport, so the vw part of a fluid font size gets smaller while the rem part gets larger. If the maximum is more than 2.5 times the minimum, some window widths can never reach 200%, which WCAG 1.4.4 requires.
Worked example: a heading from 24px at 360px to 40px at 1280px
Slope = (40 - 24) / (1280 - 360) = 16 / 920 = 0.017391 px per px, which is 1.7391vw.
Intercept = 24 - 360 x 0.017391 = 24 - 6.2609 = 17.7391px. At a 16px root that is 1.1087rem.
So the declaration is font-size: clamp(1.5rem, 1.1087rem + 1.7391vw, 2.5rem);. On an 800px-wide screen the value is 17.7391 + 800 x 0.017391 = 31.65px. The maximum is 40 / 24 = 1.67 times the minimum, well inside the 2.5 times limit, so the zoom check passes.
Formulas and scoring rules
- Slope
slope = (maxValue - minValue) / (maxViewport - minViewport)Shown in the CSS as slope x 100, in vw.- Intercept
intercept = minValue - slope x minViewportDivided by the root font size for rem output.- Expression
clamp(min(minValue, maxValue), intercept + slope x 100vw, max(minValue, maxValue))Values are rounded to 4 decimal places.- Zoom model
rendered(z) = z x value(windowWidth / z), for z from 1 to 5Passes when some zoom level gives at least twice the 100% size, for every window from 320 to 3,840 px.
Limitations: what the result does not prove
- vw is relative to the viewport, not the container. For components that live in sidebars or grids of varying width, container query units (cqi) may be a better base, but they need a containing element with container-type set.
- The zoom check covers page zoom. Text-only zoom and minimum-font-size settings behave differently in different browsers and are not modelled.
- Rounding to 4 decimals can move the result by a few thousandths of a pixel at the ends of the range; browsers round rendered sizes anyway.
- Passing the zoom check does not make a design accessible by itself - line length, spacing and reflow at 320 CSS px still need checking.
Privacy: where your data goes
Everything you paste, type or drop is processed in this browser tab. It is not uploaded, logged, stored or sent to analytics. Session recording and tag-manager scripts are switched off on this page.
Standards and sources
- CSS Values and Units Module Level 4 (clamp, min, max) - checked 19 Sep 2026
- WCAG 2.2 - Resize text (1.4.4) - checked 19 Sep 2026
- W3C - CSS Values and Units Level 4: comparison functions
- MDN - clamp()
Frequently asked questions
What does clamp() do in CSS?
clamp(min, preferred, max) returns the preferred value but never less than the minimum or more than the maximum. With a preferred value that mixes rem and vw, it produces a size that scales smoothly with the viewport and stops at sensible limits.
Why use rem instead of px in the clamp bounds?
rem values scale when a reader raises the default font size in their browser settings, and px values do not. Using rem for the minimum, maximum and intercept keeps the reader's preference in control while vw provides the fluid part.
Does a fluid font size with vw fail WCAG resize text?
It can. Zooming shrinks the CSS viewport, so a vw-heavy size may barely grow. As long as the maximum is no more than 2.5 times the minimum and the bounds are in rem, browsers that zoom to 500% can still reach 200%. The zoom check here tests your numbers directly.
Can clamp() make a value get smaller on wider screens?
Yes. Enter a larger value for the small viewport and a smaller one for the large viewport. The slope becomes negative, and the calculator still writes the smaller number first, because clamp() requires the minimum before the maximum.
Is clamp() supported in all browsers?
clamp(), min() and max() are supported in every current major browser and have been for several years. Only very old browsers ignore the declaration, in which case an earlier fixed value in your stylesheet is used.
How is clamp() different from using media queries?
Media queries switch between fixed values at breakpoints, which gives visible jumps. clamp() interpolates continuously between two sizes, so nothing jumps, and it needs a single declaration instead of one rule per breakpoint.
Last reviewed by the A2Z.Tools team against the sources listed above.
