CSS Clamp Generator
Enter a minimum size, maximum size, and the viewport breakpoints where those sizes apply. Get a ready-to-paste CSS clamp() expression that smoothly scales between the two values. Supports rem and px output. Runs in your browser.
Create a fluid CSS clamp() expression from minimum and maximum sizes plus the viewport widths where those endpoints should occur.
How to create a CSS clamp() value
- Enter minimum and maximum sizes in pixels.
- Enter the minimum and maximum viewport widths and choose px or rem output.
- Copy the generated clamp(min, fluid, max) expression.
How the calculation works
The tool linearly interpolates between the two size endpoints and converts the slope to vw units.
For rem output, size and intercept values are divided by the root font size; the vw slope remains a vw term.
Privacy and limitations
The calculation runs locally in your browser. It assumes a linear relationship between the two viewport endpoints and does not test the result against your actual layout or browser styles.
CSS clamp FAQ
What does clamp() do?
It sets a minimum, preferred fluid value, and maximum.
Can I output rem values?
Yes. Set the root size and select rem.
Why must min viewport be below max viewport?
The interpolation needs an increasing viewport range.
Can minimum size exceed maximum size?
No. The tool rejects that input.
Does it inspect my stylesheet?
No. It only calculates from the numbers you enter.