CSS clamp() Generator
Generate clamp(min, preferred, max) values for fluid CSS typography. Specify font sizes at two viewport widths; the calculator emits a clamp expression that scales linearly between them.
The quick brown fox jumps over the lazy dog. Resize your browser to see how this text scales.
What you'll use this for
clamp() lets a single CSS value handle min, preferred, and max — replacing breakpoint-heavy media queries with smooth interpolation.
Responsive headings
Make h1 scale smoothly from phone to desktop without juggling media queries.
Fluid typography
Set body and meta text once; clamp() keeps them readable on every viewport.
Component spacing
Apply clamp() to margins and padding for layout that breathes with the screen.
Accessible scaling
Use rem units in clamp() to honor user font-size preferences in browsers.
How to generate a clamp() value
Set min/max sizes
Choose the smallest and largest font size in pixels — the values at the narrowest and widest viewports you target.
Set viewport range
Pick the viewport widths where the interpolation should start and end. Common: 320px (mobile) to 1280px (desktop).
Pick a unit
rem honors user zoom preferences in most browsers; px gives exact control. Pick what fits your design system.
Copy the value
Drop the generated clamp() directly into font-size or any other length property.
Frequently asked questions
Yes. The generated clamp() value can be dropped into any font-size, margin, padding, width, or other length property.
clamp() is supported in Chrome 79+, Firefox 75+, Safari 13.1+, and Edge 79+ — every evergreen browser since mid-2020.
Yes. No signup, no limits, no ads.
Given two points (vw₁, size₁) and (vw₂, size₂), the calculator finds the line through them: slope = (size₂-size₁)/(vw₂-vw₁), intercept = size₁ - slope·vw₁. The middle argument is intercept + (slope·100)vw.
Users can change the default browser font size for accessibility. rem-based clamps respect that; px values do not.
About CSS clamp()
The CSS clamp() function takes three arguments: a minimum, a preferred value, and a maximum. The computed value is the preferred value, except never less than the minimum nor more than the maximum. Combined with viewport units, it produces smooth linear interpolation across a chosen range.
The pattern
clamp(MIN, PREFERRED, MAX)where PREFERRED is usuallya + b·vw.- Below the smaller viewport, value clamps to MIN. Above the larger viewport, value clamps to MAX. In between, it scales linearly.
- Equivalent to a media-query interpolation but in a single declaration.
Caveats
- Using only
pxignores user-set zoom; preferremfor accessible scaling. - The slope can be steep if MIN/MAX are far apart and viewports are close — test on real devices.
- See the MDN clamp() reference.