CSS Clamp() Calculator Online

CSS Clamp() Calculator 🔒 Runs locally in your browser — nothing is uploaded.

Generate a fluid clamp() value for smoothly scaling font sizes.

Min font size (px)

Max font size (px)

Min viewport width (px)

Max viewport width (px)

Root font size (px)

Only change this if your site sets html { font-size } to something other than the browser default of 16px.

Check your inputs: all sizes must be positive, and the max viewport width must be greater than the min viewport width (max font size must also be ≥ min font size).

CSS output

Preview

True fluid scaling only shows by resizing your actual browser window. These three renders approximate the range at the min, mid and max viewport widths.

At min viewport

The quick brown fox jumps over the lazy dog

Midpoint (approx.)

The quick brown fox jumps over the lazy dog

At max viewport

The quick brown fox jumps over the lazy dog

About this tool

Responsive type traditionally jumps between fixed sizes at each media-query breakpoint — 16px on mobile, then a sudden snap to 20px past a certain width. CSS `clamp(MIN, PREFERRED, MAX)` replaces that jump with continuous scaling: the font size grows smoothly, in lockstep with the viewport, between your chosen minimum and maximum. Below the min viewport width it "clamps" at the minimum size; above the max viewport width it clamps at the maximum. Only in between does it flex.

This calculator does the interpolation math for you: it works out the linear slope between your min and max font sizes over your chosen viewport range, expresses it as a `vw`-based preferred value, and wraps everything in a ready-to-paste `clamp()` string. Paste the result straight into `font-size` (or any other numeric property) — no more breakpoint-specific overrides for type scale.

Frequently asked questions

Why use clamp() instead of just a media query?

Media queries jump between fixed sizes at breakpoints, while clamp() scales smoothly and continuously between your min and max as the viewport resizes — no visible "jump" at any width.

Does clamp() work in all browsers?

Yes — CSS clamp() has been supported in all major browsers (Chrome, Firefox, Safari, Edge) since 2020, so it's safe to use in production without a fallback for virtually all audiences today.