How does clamp() work?

clamp(MIN, PREFERRED, MAX) picks the middle value of the three: it uses PREFERRED (usually a viewport-relative calculation) as long as it stays between MIN and MAX, and clips to MIN or MAX outside that range — giving you fluid scaling that never goes below or above your limits.

Why does the preferred value mix rem and vw?

The vw part makes the value scale with viewport width; the rem part is a fixed offset that positions the line so it passes through your exact min-size-at-min-width and max-size-at-max-width points. Together they form a linear function, computed the same way fluid-typography tools like Utopia do.

Why rem instead of px in the output?

Using rem means the value still respects a user's browser font-size setting for accessibility, while the underlying math is done in px (converted using your root font size) so the numbers you type match what you'd see in a design tool.

Can I use this for spacing or width, not just font-size?

Yes — clamp() works for any length-typed CSS property. Change the "CSS property" field to padding, gap, width, or anything else; the generated clamp() value itself doesn't change, only which property it's assigned to.

CSS CLAMP GENERATOR

Build a fluid clamp() value that scales between a min and max across a viewport range. Nothing leaves your browser.

Min viewport width (px)

Max viewport width (px)

Min size (px)

Max size (px)

CSS property

Root font size (px, for rem)

Resize the window to see me scale

CSS

font-size: clamp(1rem, 0.6667rem + 1.4815vw, 2rem);

Scales linearly from 16px at 360px viewport width to 32px at 1440px, then holds steady outside that range.

How to generate a CSS clamp() value

1
Enter the viewport width range you want the value to scale across (min and max, in px).
2
Enter the size range: the value at the min width and the value at the max width.
3
Pick the CSS property (defaults to font-size).
4
Copy the generated clamp() declaration and watch the live preview scale as you resize the browser window.

Questions

How does clamp() work?: clamp(MIN, PREFERRED, MAX) picks the middle value of the three: it uses PREFERRED (usually a viewport-relative calculation) as long as it stays between MIN and MAX, and clips to MIN or MAX outside that range — giving you fluid scaling that never goes below or above your limits.
Why does the preferred value mix rem and vw?: The vw part makes the value scale with viewport width; the rem part is a fixed offset that positions the line so it passes through your exact min-size-at-min-width and max-size-at-max-width points. Together they form a linear function, computed the same way fluid-typography tools like Utopia do.
Why rem instead of px in the output?: Using rem means the value still respects a user's browser font-size setting for accessibility, while the underlying math is done in px (converted using your root font size) so the numbers you type match what you'd see in a design tool.
Can I use this for spacing or width, not just font-size?: Yes — clamp() works for any length-typed CSS property. Change the "CSS property" field to padding, gap, width, or anything else; the generated clamp() value itself doesn't change, only which property it's assigned to.