All tools/Web & CSS

CSS Clamp() Calculator

Generate a fluid clamp() value that scales smoothly between a min and max size across viewport widths.

Min size (px)

Max size (px)

Min viewport (px)

Max viewport (px)

The quick brown fox

Resize your browser window to see this scale — clamp() responds to real viewport width, not this preview box.

CSS

How this works & FAQ

Set the smallest size at your smallest viewport and the largest size at your largest viewport. The generated clamp() interpolates linearly between them using vw units, and stays pinned to the min/max outside that range.

Why use clamp() instead of media queries?

It scales continuously with the viewport instead of jumping at fixed breakpoints, giving smoother, more natural fluid typography with one line of CSS.