Generate a responsive clamp between two sizes

Front-end developers and designers use it when type or spacing must scale smoothly between two limits as the viewport changes.

Generate a responsive clamp between two sizes. Everything runs in your browser, so the values you enter are never uploaded, shared, or stored.

How to use

Enter the minimum size in pixels you want on small screens.
Provide the maximum size in pixels for larger screens.
Fill in the minimum viewport width and the maximum viewport width in pixels.
Run the generator to get a CSS clamp declaration ready to integrate.

Example

A common example defines a text size that scales between a small screen and a large screen. After generation, copy the clamp value and test it in your stylesheet to check that the text follows the viewport width as expected.

Input

Output

clamp(16px, 13.090909px + 0.909091vw, 24px)

Limits and formats

The tool only generates the fluid size value, not the full layout or other styles.
The clamp function must be supported by the browser used by your visitors.
Poorly chosen viewport values can make the scaling too fast or too slow.
Always test the result at several screen widths before deploying it.

Where processing happens

The fluid value calculation runs in your browser. The dimensions you enter stay on your device and are not sent to an external service. You can prepare your CSS without transmitting data.

Frequently asked questions

What do the four values mean?

You provide the minimum and maximum size in pixels, then the minimum and maximum viewport width. The tool uses these points to build a progression between the two sizes.

Can I use the result for margins or spacing?

Yes, the generated value can be used for a text size, a margin or spacing, as long as the CSS property accepts a clamp function. Just adapt the unit and property in your stylesheet.

Does the result work in every browser?

The clamp function is widely supported by modern browsers, but older versions may not recognize it. Provide a fallback value if you need to support very old browsers.