Generate a fluid CSS clamp() value
Generate a fluid typography or spacing clamp() value that scales smoothly between a min and max viewport width.
| Viewport | Computed size |
|---|---|
| Min width (375px) | 16.00px |
| Midpoint (908px) | 24.01px |
| Max width (1440px) | 32.00px |
Enter the min and max viewport widths you want the value to scale between.
Enter the size at the min width and the size at the max width, in px or rem.
Check the 3-row table to sanity-check the computed size at the min, mid, and max widths before copying.
Frequently asked
What does clamp() actually do?
clamp(min, preferred, max) picks the preferred value, but never lets it go below min or above max. Here, the preferred value is a linear function of viewport width (rem/px + vw), so the size scales smoothly between two breakpoints and then holds steady outside that range.
Why is there a vw unit mixed into the output?
The vw unit is what makes the size responsive. It's a percentage of the viewport width, so as the browser resizes, the value shifts smoothly along the line connecting your min and max points instead of jumping between fixed breakpoints.
Should I use px or rem for the sizes?
rem is usually preferred for font-size and spacing, since it respects the user's browser font-size setting for accessibility. px is fine for cases where you want an exact pixel value regardless of user preferences.
What happens below the min width or above the max width?
The value holds steady at minSize below minWidth, and at maxSize above maxWidth. That's the whole point of clamp(), it only interpolates between the two breakpoints and is flat outside them.