About the CSS Clamp Calculator
This CSS clamp calculator generates fluid values for font-size, padding, gaps or any length. Enter the size you want on small screens, the size you want on large screens and the two viewport widths where scaling should start and stop; the tool returns a ready-to-paste clamp() expression whose middle term grows linearly with the viewport, so text scales smoothly without a stack of media queries.
It is built for front-end developers and designers setting up fluid type scales, responsive headings and spacing tokens. The chart shows exactly how the size changes across screen widths and the table lists the computed size at common device widths, so you can check the phone, tablet and desktop values before shipping.
Values are output in rem by default, using your root font size (16px in every browser unless changed), so the fixed part of the formula still respects a user’s browser font-size setting. Choose px if your project uses pixels throughout.
How to use the css clamp calculator
- 1Enter the smallest size you want (on phones) and the largest (on desktops) in px.
- 2Enter the viewport widths where scaling should start and stop, e.g. 320px and 1280px.
- 3Keep rem output and your root font size (usually 16px).
- 4Check the chart and the size table at common device widths.
- 5Copy the clamp() value or the full CSS declaration.
Formula and method
Fluid sizing draws a straight line between two points: (minimum viewport, minimum size) and (maximum viewport, maximum size). The slope is how many pixels the size grows for every pixel of viewport width, and the offset is where that line would cross a 0px-wide viewport. Because 1vw is 1% of the viewport width, the middle term of clamp() is written as the offset plus slope × 100 in vw.
clamp(MIN, PREFERRED, MAX) then stops the line from going below the minimum on narrow screens or above the maximum on wide ones. Offsets and limits are divided by the root font size to express them in rem; the vw part stays in vw because it depends on the viewport, not the font size.
- minSize, maxSize
- Target sizes in px at the two viewport widths
- minVw, maxVw
- Viewport widths in px where scaling starts and stops
- slope
- Size change per px of viewport (×100 gives the vw coefficient)
- offset
- Constant part of the preferred value, converted to rem
Worked examples
Body text from 16px to 24px
The size grows 8px over 960px of viewport, a slope of 0.008333, i.e. 0.8333vw. The offset is 16 − 0.008333 × 320 = 13.33px = 0.8333rem. On a 768px tablet the size is 16 + 448 × 0.008333 ≈ 19.73px.
Hero heading from 32px to 64px
A 32px rise over 1,065px of viewport gives 3.0047vw. The offset is 32 − 0.030047 × 375 = 20.73px = 1.2958rem. At 1,024px wide the heading is about 51.5px.
Fluid gap in pixels
A 20px change over 800px of viewport is a slope of 0.025, or 2.5vw, with an offset of 12 − 0.025 × 400 = 2px. At 1,600px the preferred value would be 42px, but clamp() caps it at 32px.
Frequently asked questions
What does CSS clamp() do?+
clamp(MIN, PREFERRED, MAX) returns the preferred value as long as it lies between the minimum and maximum, and otherwise returns the nearest limit. With a vw-based preferred value it creates sizes that scale with the screen but never get too small or too large.
Why include rem in the middle value instead of only vw?+
A pure vw value ignores the user’s browser font-size setting and does not grow with zoom. Adding a rem offset keeps part of the size tied to the root font size, which makes fluid type more accessible and lets you hit exact sizes at both breakpoints.
Is clamp() supported in all browsers?+
Yes. clamp() shipped in Chrome and Edge 79 (December 2019 and January 2020), Safari 13.1 and Firefox 75 (both 2020), so it works in every current browser. Very old browsers ignore the declaration, so you can put a fixed fallback value on the line above it.
What viewport widths should I use?+
Common choices are 320–375px for the smallest phones and 1200–1440px for the widest layout. Use the width where your container stops growing as the maximum, because beyond it the text should stop scaling too.
Can I use clamp() for spacing as well as fonts?+
Yes. clamp() works for any length: padding, margin, gap, width, border-radius and more. Using the same fluid scale for type and spacing keeps proportions consistent across screen sizes.