⚡
CSS ToolsNew
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.
Size Range
Viewport Range
CSS Output
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.