BYTETOOLS

CSS Clamp Calculator

Turn a minimum and maximum size plus two viewport widths into a fluid CSS clamp() value, with the slope, intercept and computed size at seven screen widths.

Fluid size

Generated CSS

font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
Slope (size px per viewport px)0.008333
Viewport coefficient0.8333vw
Intercept (value at a 0px viewport)0.8333rem = 13.3333px
Size at 320px viewport16.0000px
Size at 1280px viewport24.0000px
1rem
Minimum
1.5rem
Maximum

Computed size at common viewport widths

ViewportLinear valueRendered sizeBranch
320px16.00px16.00pxheld at minimum
480px17.33px17.33pxscaling
768px19.73px19.73pxscaling
1024px21.87px21.87pxscaling
1280px24.00px24.00pxheld at maximum
1440px25.33px24.00pxheld at maximum
1920px29.33px24.00pxheld at maximum

Preview at a 1024px viewport

The quick brown fox jumps over the lazy dog

Rendered at 21.87px — the value your clamp() resolves to on a 1024px-wide screen.

What is the CSS Clamp Calculator?

The clamp() function lets one declaration cover every screen size: a floor, a value that scales with the viewport, and a ceiling.

  • Exact slope and intercept, both shown alongside the result
  • rem or px output with a configurable root font size
  • Table of computed sizes at 320 to 1920 pixels
  • Marks whether each width is scaling or held at a limit
  • Works for padding, gap, width and other properties, not just font-size
  • Guards against identical viewport widths instead of dividing by zero

How to use the CSS Clamp Calculator

  1. 1

    Enter the minimum size and the viewport width where it should apply.

  2. 2

    Enter the maximum size and the viewport width where it should stop growing.

  3. 3

    Set the root font size, and choose rem or px for the output.

  4. 4

    Pick the CSS property you are generating the value for.

  5. 5

    Check the table of computed sizes, then copy the declaration.

About the CSS Clamp Calculator

The clamp() function lets one declaration cover every screen size: a floor, a value that scales with the viewport, and a ceiling. The hard part is the middle term, which has to be a straight line passing through both of your chosen points. This calculator works it out and shows you the arithmetic.

The slope is the change in size divided by the change in viewport width, and the intercept is what that line would be at a viewport of zero. Multiplying the slope by 100 turns it into a vw unit. With a 16px minimum at 320px and a 24px maximum at 1280px you get clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem), which lands exactly on 16 and 24 at the endpoints.

A table shows what the value resolves to at seven common widths and whether it is scaling or being held at a limit. Everything is calculated in your browser and nothing is uploaded.

Frequently asked questions

How does CSS clamp work?

clamp() takes three values: a minimum, a preferred value, and a maximum. The browser uses the preferred value unless it falls outside the other two, in which case it uses whichever bound it crossed. Making the preferred value depend on vw is what produces fluid scaling.

How do you calculate the vw value for clamp?

Divide the difference in sizes by the difference in viewport widths to get the slope, then multiply by 100 for the vw coefficient. The rem part is the minimum size minus the slope times the minimum viewport width. This tool shows both numbers so you can check the working.

Why should the clamp value include a rem term?

Because a preferred value made only of vw units ignores the user's browser font size setting, which fails WCAG success criterion 1.4.4 on resizing text. Including a rem component means the text still responds to zoom and to a larger default size.

Can I use clamp for padding and margins too?

Yes, and it is one of the best uses for it. Fluid spacing keeps the proportions of a layout consistent as the screen grows, rather than jumping at breakpoints. The property dropdown here covers padding, margin, gap, width, height, border-radius and letter-spacing.

What viewport widths should I use as the endpoints?

320px is a sensible floor since it covers the smallest phones still in use, and somewhere between 1280 and 1440 is a common ceiling. Setting the maximum too high means most desktop users never see your maximum size, because the value is still climbing at their screen width.

Related tools