Design tool
CSS Clamp Generator
Create fluid sizing between a minimum and maximum viewport.
CSS clamp value
clamp(1rem, 0.6667rem + 1.6667vw, 2rem)
How the css clamp generator works
Generate a responsive CSS clamp() expression from value and viewport bounds.
16–32 px across 320–1280 px yields clamp(1rem, 0.6667rem + 1.6667vw, 2rem) at a 16 px root.
Assumptions and limitations
Minimum viewport must be below maximum viewport, and minimum value cannot exceed maximum value.
Inputs and results stay in your browser. Blank, invalid, or mathematically undefined inputs show a clean placeholder instead of a broken number.
Practical use
Use this design tool to explore scenarios quickly, then verify important decisions against the original source data or requirements.
Frequently asked questions
Does the css clamp generator send my data anywhere?
No. It runs client-side in your browser and makes no network requests.
Why is the result blank or shown as a dash?
One or more inputs are blank, outside the accepted range, or would make the calculation undefined. Check the labels and enter finite values.
Can I use decimal values?
Yes, where decimals are meaningful. Counts that represent whole items may require integers.