CSS clamp() Calculator

About this tool

Generates a CSS clamp() expression for fluid, responsive font sizes (or any size property) that scales smoothly between a minimum and maximum value across a viewport width range — no media queries needed. Set your min/max size and the viewport range they apply across, and get one line of CSS.

The formula is the standard fluid-typography approach: below the min viewport it stays at the minimum size, above the max viewport it stays at the maximum size, and in between it scales linearly using vw units.

Frequently asked questions

Can I use this for spacing/padding, not just font-size?

Yes — the generated clamp() value works for any CSS length property (padding, gap, margin, etc.), not just font-size.

Why does it use rem instead of px?

rem respects the user's browser font-size setting (accessibility), while still scaling fluidly with viewport width — this tool assumes the standard 16px root font size when converting your px inputs to rem.

What happens outside the min/max viewport range?

The size stays pinned at exactly your minimum or maximum value — clamp() guarantees it never goes smaller or larger than the range you set, regardless of how narrow or wide the actual viewport is.