Why Use Rem And VW Together?

Rem keeps fixed limits tied to the user's base text size while vw supplies the fluid viewport-based change between those limits.

Can I Use The Result For Spacing?

Yes. The same clamp value can be used for width, gap, padding or other length properties after testing the layout at its boundaries.

CSS Clamp Calculator

Generate a fluid CSS clamp() value from minimum and maximum sizes and viewport widths, with a live preview.

Minimum SizepxMaximum SizepxMinimum ViewportpxMaximum ViewportpxRoot Font Sizepx

Generated CSS

font-size: clamp(1.125rem, 0.465rem + 2.817vw, 3.000rem);

Fluid Type Preview

Type that scales with the viewport.

The preferred value is a straight-line interpolation between the two viewport widths. Outside that range, the minimum and maximum stop further scaling.

Loading Tool…

What Is the CSS Clamp Calculator?

The CSS Clamp Calculator creates a mathematically continuous clamp() expression that scales between two pixel sizes across a chosen viewport range. It converts the fixed bounds and intercept to rem units, keeps the responsive slope in vw and previews the result in the browser.

How It Works

Enter the minimum and maximum size, the viewport width where each should apply and your document's root font size. Copy the generated font-size declaration and test it in the layout where it will be used.

When to Use It

Use it for fluid headings, body text, spacing or component dimensions that should grow smoothly without a long series of media queries.

Frequently Asked Questions

Why Use Rem And VW Together?: Rem keeps fixed limits tied to the user's base text size while vw supplies the fluid viewport-based change between those limits.
Can I Use The Result For Spacing?: Yes. The same clamp value can be used for width, gap, padding or other length properties after testing the layout at its boundaries.

Found an issue? Send Feedback. See our data sources and update policy for tools that depend on changing information.