CSS Clamp Calculator

How to use the calculator

1. Choose the CSS property you want to make fluid.
2. Enter the minimum and maximum viewport widths in pixels.
3. Enter the property value at each viewport endpoint.
4. Choose rem or px output. If you use rem, set the root font size used for conversion.
5. Inspect the curve, move the preview slider, and copy either the complete declaration or only the clamp() value.

With the defaults—320px to 1440px and 16px to 32px—the result is:

font-size: clamp(1rem, 0.7143rem + 1.4286vw, 2rem);

What the generated expression means

clamp(minimum, preferred, maximum) asks the browser to use the preferred value while keeping it between the two bounds. The calculator derives the preferred value from the line through your two viewport/value points:

slope = (end value - start value) / (max viewport - min viewport)
intercept = start value - slope × min viewport
preferred = intercept + (slope × 100)vw

Below the minimum viewport, the lower or upper bound holds the value at its endpoint. Between the endpoints, the value changes linearly. Beyond the maximum viewport, the opposite bound takes over.

Fluid typography and spacing

Fluid values are useful when a sudden breakpoint would create a visible jump. Typical targets include headings, section padding, grid gaps, and content widths. They are less useful for values that must align to a strict fixed system, such as one-pixel borders.

For font sizes, rem bounds preserve a relationship with the root font size. Still test the finished layout at 200% browser zoom and with longer translated text. A mathematically valid expression can still overflow a real component.

Reverse and constant ranges

The end value may be smaller than the start value. In that case the preferred expression uses a negative vw term, so the property decreases as the viewport widens. The calculator sorts only the clamp() bounds; it preserves the direction of the line.

If both endpoint values match, no fluid calculation is needed. The output becomes a single fixed length such as 1rem. Negative values are accepted for margin and the custom property, where negative lengths can be meaningful, but rejected for the other presets.

Privacy

Everything runs client-side. ZeroTool does not upload viewport sizes, property values, or generated CSS. The saved form state uses local browser storage and can be removed with Reset.