CSS Clamp Calculator
Generate CSS clamp() values for fluid, responsive design. Input minimum and maximum values with viewport breakpoints to get a perfectly scaling clamp() function.
CSS clamp(min, preferred, max) creates values that scale fluidly between a minimum and maximum based on viewport width — no media queries needed. The preferred value is a linear vw-based expression that the tool calculates from your min/max breakpoints.
Size Range
Viewport Range
clamp(16rem, 26.6667vw + 10.6667rem, 32rem)Value at different viewports
| Viewport | Computed (px) | Computed (rem) | Preview |
|---|---|---|---|
| 320px | 256.00px | 16.000rem | Aa |
| 640px | 341.33px | 21.333rem | Aa |
| 768px | 375.47px | 23.467rem | Aa |
| 1024px | 443.73px | 27.733rem | Aa |
| 1280px | 512.00px | 32.000rem | Aa |
| 1440px | 512.00px | 32.000rem | Aa |
Frequently Asked Questions
What is CSS clamp() used for?
CSS clamp() creates fluid values that scale smoothly between a minimum and maximum based on the viewport width — perfect for responsive typography and spacing.
How is the preferred value calculated?
The preferred value is a linear function: calc(slope * 100vw + intercept), where slope = (maxValue - minValue) / (maxViewport - minViewport). The calculator does this math for you.
Should I use px or rem?
Use rem for font sizes — it respects the user's browser font preference setting. Use px for layout spacing where you control the base dimensions.
Can clamp() replace all my media queries?
For typography and many spacing values, yes. For layout changes (column counts, navigation patterns), media queries are still the right tool. Use clamp() for scaling within a layout, not for changing the layout itself.