CSS Clamp Calculator

Generate a copy-ready CSS clamp() declaration for fluid typography, spacing or layout values.

Need help with the calculation?
Fluid preview text
Ask AI about this article
The assistant can make mistakes. Check important calculations and decisions. By sending a message, you agree to the Terms of Use and acknowledge the Privacy Policy.

This calculator turns minimum and maximum sizes plus viewport bounds into a copy-ready CSS clamp() declaration. Use it for fluid font sizes, spacing, gaps and layout values without manually calculating the slope.

What to enter

Set the smallest and largest value, the viewport range where scaling should happen, and the CSS property you want to output. The result is calculated locally in your browser.

Scope

The formula assumes a linear scale between the two viewport widths. Check the generated value in your own layout before shipping production CSS.