CSS Clamp Calculator

How the clamp formula works

The generated CSS follows clamp(min, preferred, max), where the browser picks whichever value falls in the middle of the three at any given viewport width. The preferred value is a linear equation using vw units, so the size scales smoothly between your minimum and maximum viewport widths — below the minimum viewport it locks to the minimum size, above the maximum viewport it locks to the maximum size, and in between it scales continuously rather than jumping at breakpoints.

Common uses

Use it for headings, body text, spacing, and grid gaps where you want responsive scaling without writing multiple media queries. It's especially useful for large display headings that need to shrink gracefully on mobile without a specific breakpoint looking awkward.

Frequently asked questions

Which unit should I use — px, rem, or em?

rem is generally preferred for font sizes since it respects the user's browser font-size setting for accessibility, while px is simpler for spacing or elements that shouldn't scale with user preferences.

What do "slope" and "intercept" mean?

They're the two numbers in the underlying linear equation: slope is how many size units the value grows per 1vw, and intercept is the constant added at 0vw. You don't need them to use the CSS — they're shown for anyone who wants to verify or tweak the math by hand.