CSS Clamp Calculator
Generate a fluid CSS clamp() value that scales smoothly between a minimum and maximum size.
About this tool
Generate a fluid CSS clamp() value that scales smoothly between a minimum and maximum size as the viewport width changes — commonly used for responsive font sizes and spacing without media query breakpoints.
Key Features
- Standard fluid-typography formula
- Output in rem for the fixed bounds, vw for the fluid middle term
- Works for font-size, padding, margin, or any length property
- No media queries needed
How to Use
- Set the minimum size and the viewport width it should apply at.
- Set the maximum size and the viewport width it should apply at.
- Click Generate.
- Paste the CSS into any size-related property.
Benefits
- Smoothly scale text or spacing across all screen sizes
- Replace several media query breakpoints with a single line
- Avoid text that is too small on mobile or too large on desktop
Frequently Asked Questions
clamp(MIN, PREFERRED, MAX) takes three values: a minimum, a preferred value that can change (here, a formula based on viewport width), and a maximum. The browser uses the preferred value unless it would go below the minimum or above the maximum, in which case it uses that bound instead — giving a value that scales fluidly between two fixed limits.
rem scales with the user's font size settings, which is better for accessibility than a fixed pixel value, and vw (viewport width) is what allows the middle term to respond fluidly as the browser window resizes. Mixing the two in one calc-like expression is the standard technique behind fluid typography.
Yes — clamp() is a general-purpose CSS value, so the same generated output works for padding, margin, gap, width, or any other property that accepts a length value, not just font-size.