How to use the CSS Clamp Generator
- 1. Set the two sizesThe size you want on small screens and on large screens, in px.
- 2. Set the two widthsThe screen widths where scaling starts and stops.
- 3. Copy the CSSPaste the declaration and check the table of computed sizes.
Worked example
For text that is 18 px on a 375 px phone and 32 px on a 1440 px laptop, the slope is (32 − 18) ÷ (1440 − 375) = 0.013146 px of size per px of width, or 1.3146vw. The intercept is 18 − 0.013146 × 375 = 13.07 px, which is 0.8169rem. The result is clamp(1.125rem, 0.8169rem + 1.3146vw, 2rem).
The table checks it: at 768 px wide the size is 23.17 px, at 1024 px it is 26.53 px, and it stays at 18 px below 375 px and 32 px above 1440 px because clamp holds the value between its minimum and maximum.
Accessibility and units
- rem for the fixed parts means the size still follows the visitor's browser font setting. Pure vw text ignores it.
- Zoom: WCAG 1.4.4 asks that text can be resized to 200%. Very steep vw slopes can fight zoom, so keep the range moderate and test with browser zoom.
- vi is the inline-size version of vw, useful for vertical writing modes.
- cqi scales with a container instead of the viewport, so a component can be fluid inside any layout.
The same formula works for padding, gaps and margins: change the property name. Browser support for clamp() has been universal in current browsers for years. Build the sizes to plug in with the type scale generator and the spacing scale generator.
Frequently asked questions
Why not just use media queries?
Media queries jump between sizes at breakpoints. clamp() changes smoothly, so there are no awkward in-between widths.
Can the size shrink as the screen grows?
Yes, enter a larger small-screen size than large-screen size; the slope becomes negative and the tool writes a minus sign.
Is the CSS Clamp Generator free?
Yes, the CSS Clamp Generator is free. The first time you generate your first value, you are asked for your name and WhatsApp number once. After that, this and every other Uncodemy tool opens straight away without the form.