CSS Clamp Calculator Guide

Fluid typography and spacing should grow smoothly without becoming too small on phones or too large on wide screens. CSS clamp combines a minimum, a viewport-based preferred value, and a maximum.

How to use the CSS Clamp Calculator

1. Enter minimum and maximum pixel sizes.
2. Enter the viewport widths where those endpoints should occur.
3. Run the calculator and paste the generated clamp expression into a CSS property.

A practical example

A size that grows from 16 px at 320 px viewport width to 24 px at 1280 px becomes a linear expression bounded by clamp so it stops outside that range.

The CSS Clamp Calculator runs locally in the browser, so the input is available for the calculation without being uploaded by this tool.

Checks before you use the output

• The maximum viewport must be larger than the minimum viewport.
• Use rem endpoints when user font scaling is a primary accessibility requirement.
• Test real layouts between the endpoints, not only at the minimum and maximum.

Use the result as part of a review

Generate a fluid CSS clamp expression between two viewport widths. The output is designed to make a small task faster, but it should still be checked against the requirements of the destination system, document, or decision.

Privacy and safe sample data

Processing happens in the current browser tab. Even so, remove passwords, authorization values, customer records, and other confidential data before copying results into chat, tickets, or public examples.