CSS Clamp Calculator
Generate CSS clamp() values for fluid, responsive typography and spacing
Presets
Settings
px
rem
rem
rem
rem
Viewport values are in rem (e.g. 20 = 320px, 80 = 1280px at 16px root)
CSS Output
clamp(1.0000rem, 0.8333vw + 0.8333rem, 1.5000rem)
Live Preview
@ 20remAa16px
@ 50remAa20.0px
@ 80remAa24px
Viewport Reference Table
| Viewport | Value (px) | Value (rem) | Status |
|---|---|---|---|
| 320px | 16.00px | 1.0000rem | clamped |
| 375px | 16.46px | 1.0286rem | fluid |
| 414px | 16.78px | 1.0490rem | fluid |
| 640px | 18.67px | 1.1667rem | fluid |
| 768px | 19.73px | 1.2333rem | fluid |
| 1024px | 21.87px | 1.3667rem | fluid |
| 1280px | 24.00px | 1.5000rem | clamped |
| 1440px | 24.00px | 1.5000rem | clamped |
| 1920px | 24.00px | 1.5000rem | clamped |
Frequently asked questions
What does CSS Clamp Calculator do?
Generate CSS clamp() values for fluid, responsive typography and spacing
What should I check in the result?
Preview the result with your actual content and at different screen sizes. Check readability and compatibility in the browsers you support.