CSS clamp() Calculator
Enter a size for small and large screens and get a fluid clamp() value that scales smoothly in between — for font sizes, padding, margins or gaps.
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)The result keeps a rem part in the middle term, so text still enlarges when someone zooms to 200% — a viewport-only value would not.
Fluid text, sized just right.
The calculation runs entirely in your browser. Nothing you enter here is uploaded to BroBroGo.
FAQ
How does the calculator build the clamp() value?
You give it two points: a size at a small screen width and a size at a large one. It draws a straight line between them so the size grows smoothly as the screen widens, then wraps it in clamp() so it never drops below your small-screen size or rises above your large-screen size. Between the two widths the size scales fluidly; outside them it holds at the nearest limit.
Why is the result in rem and vw instead of pixels?
The bounds are in rem and the changing middle part keeps a rem component, so text still grows when a reader zooms in or raises their browser’s default font size — a pixel- or viewport-only value can stop that from working. You type sizes in pixels because that’s how most people think about them, and the tool converts to rem using your root font size.
Can I use this for spacing, not just font size?
Yes. The same value works for padding, margin, gap, width or height — anywhere a length goes. Switch the preview to Box to watch the spacing grow instead of text. If your small and large sizes are the same, the result collapses to a plain fixed length, since there is nothing to scale.
Do all browsers support clamp()?
Yes — every current browser has supported clamp() since 2020, so you can ship the value as-is with no fallback. On a very large maximum or a fast rate of change, it is worth a quick check at 200% zoom that the text still enlarges for readers who need it.