CSS clamp calculator

Generate a fluid CSS clamp() value between chosen sizes and viewport widths. Create a responsive font-size or spacing rule that scales linearly between a defined minimum and maximum.

3 guest runs per rolling 24 hours10 with a free accountPrivate inputsMobile-friendly

CSS clamp calculator workspace

Runs locally in your browser

For rem and em, the calculation uses a 16px reference size. Check the result against your project’s actual root and inherited font sizes.

Result

Viewport slope—

Calculated intercept—

CSS clamp() value

Use it with confidence

How to use the CSS clamp calculator.

Add the requested inputs

Use the labelled fields in the workspace above. If example values are provided, try them first or replace them with your own.

Calculate and review

Use the main action when needed. The calculator derives a viewport-width slope and intercept, then places that preferred value between the entered minimum and maximum.

Try a worked example

Scale text from 1rem at a 320px viewport to 2rem at 1,280px and copy the resulting clamp expression.

Check the assumptions

rem and em calculations use a 16px reference in this tool; test the result with the actual root size, container, zoom and accessibility settings.

Helpful answers