Skip to content
Toolspire

CSS Tools

CSS Clamp Calculator

CSS Clamp Calculator is part of Toolspire and is ready as soon as this page loads. From 16px at a 320px viewport to 32px at 1280px, the preferred term is about 10.6667px + 1.6667vw. Below the small viewport the minimum wins. Above the large one the maximum wins.

Runs in this tabFreeNo account

On this page

What you can do here

Viewport in pixels, slope in vw

You describe the two screens in px. The middle term is converted to vw so the browser can interpolate.

Clamp keeps the ends

The min and max arguments stop the type shrinking on a narrow phone or growing on a wide monitor.

Four-decimal preferred value

The px and vw terms are rounded to four decimals, which is enough to land on the endpoints in practice.

The sequence

How to use the CSS Clamp Calculator

  1. 1

    Choose the size at the small screen and at the large screen

    16 and 32 are a body-text example. A heading might be 28 and 48. The page does not pick a scale for you.

  2. 2

    Set the viewports where those sizes should be exact

    320 and 1280 are the sample. Use the widths you actually design for.

  3. 3

    Paste the clamp into font-size or gap

    The declaration is the function only. Add font-size: yourself if that is the property you wanted.

Worth knowing

  • CSS Clamp Calculator on Toolspire: the slope is (max size − min size) / (max viewport − min viewport). That slope times 100 is the vw term.
  • The intercept is min size − slope × min viewport, so the preferred value equals the minimum at the small viewport.
  • 16px to 32px from 320px to 1280px gives clamp(16px, 10.6667px + 1.6667vw, 32px).
  • The maximum size must be at least the minimum, and the large viewport must be wider than the small one.

Where the preferred term comes from

clamp(MIN, PREFERRED, MAX) uses the preferred value when it sits between the ends. A straight line from (min viewport, min size) to (max viewport, max size) is that preferred value. Written as intercept plus slope times the viewport, and with the viewport expressed as vw, it becomes intercept-in-px plus (slope × 100) vw. At the minimum viewport the line equals the minimum size. At the maximum viewport it equals the maximum size. Outside that range, clamp holds the end you set.

FAQ

Questions about CSS Clamp Calculator

Where does CSS Clamp Calculator run?

CSS Clamp Calculator runs in this tab on Toolspire. What you type or drop in is not sent to us and is not stored on a server.

What does the sample clamp compute?

16px at a 320px-wide viewport, growing to 32px at 1280px: clamp(16px, 10.6667px + 1.6667vw, 32px).

Why is there a px term and a vw term?

The px term is the intercept. The vw term is the slope. Together they are the straight line between your two design widths.

Can the maximum size be smaller than the minimum?

No. The page rejects that. A size that shrinks as the screen grows is a different design and easy to request by accident.

Is this only for font-size?

No. The function is a length. People use it for type, but the same string works for a fluid gap or a fluid width.

Keep going

Related tools

CSS Border Radius GeneratorNewCSS Border Radius Generator on Toolspire: Write a border-radius declaration from four corners, and collapse it to one value when every corner matches.CSS ToolsPX to REM ConverterNewPX to REM Converter on Toolspire. Convert pixels to rem and rem back to pixels using your root font size. No account is required.CSS ToolsCSS Gradient GeneratorNewCSS Gradient Generator on Toolspire. Build a linear or radial CSS gradient from hex colours, preview it. No account is required.CSS ToolsCSS Glassmorphism GeneratorNewCSS Glassmorphism Generator on Toolspire: Glassmorphism generator: design frosted glass with blur, tint, border and grain, check text contrast live.CSS ToolsCSS Neumorphism GeneratorNewCSS Neumorphism Generator on Toolspire: Neumorphism generator: soft UI box-shadows from any colour and light angle, with contrast checks, pressed states.CSS ToolsBento Grid GeneratorNewBento Grid Generator on Toolspire: Draw tiles with the mouse, preview desktop, tablet and phone, and copy responsive CSS Grid, Tailwind or React code.CSS Tools

Open the full directory

Last updated Report a problem or suggest a feature