How do I use the CSS Clamp Calculator?

Set minimum and maximum viewport widths (e.g., 320px and 1200px). Set minimum and maximum values (e.g., 16px and 24px for font size). Choose the unit (px or rem) and set root font size if using rem. Click Generate Clamp to create the CSS clamp() function. Copy the generated code and use it in your CSS.

Is the CSS Clamp Calculator free?

Yes, the CSS Clamp Calculator is completely free. It runs entirely in your browser with no signup, no download, and no data sent to any server.

📏

calculator

CSS Clamp Calculator

Generate fluid CSS clamp() values for responsive typography and spacing. Set min/max viewport and values with live preview.

css clamp calculatorfluid typographyresponsive font sizeclamp generator

CSS Clamp Calculator

Generate fluid CSS clamp() values for responsive typography and spacing. Set min/max viewport and values.

Min Viewport Width

Max Viewport Width

Min Value

Max Value

Root Font Size (for rem conversion)

How to use

How to Use the CSS Clamp Calculator

1 Set minimum and maximum viewport widths (e.g., 320px and 1200px).
2 Set minimum and maximum values (e.g., 16px and 24px for font size).
3 Choose the unit (px or rem) and set root font size if using rem.
4 Click Generate Clamp to create the CSS clamp() function.
5 Copy the generated code and use it in your CSS.

CSS clamp() creates fluid responsive values that scale smoothly between a minimum and maximum. The syntax is clamp(min, preferred, max). The preferred value uses a combination of rem and vw units calculated to produce linear scaling between your specified viewport breakpoints.

Use clamp() for responsive font sizes to eliminate the need for multiple media queries. Common uses include fluid heading sizes (e.g., 28px→48px), body text (16px→18px), and section spacing (24px→64px). The calculator handles the math to produce the correct rem + vw formula.

More Calculator tools