Fluid CSS clamp generator
Generate a CSS clamp() value that scales a font size or spacing smoothly between two viewport widths, in px or rem.
- Runs in your browser
- No upload
- Result stays on your device
Privacy & limitsRuns in your browser. Nothing is uploaded.
Input content stays in this tab; Refentra does not upload or store it. Optional aggregate action counts are sent only with your usage consent. Clear the workspace when finished.
Supported profile: Use one unit, px or rem; 0≤min≤max and 0<viewport start<end. For rem, viewport bounds are rem too.
Maximum text: 200,000 UTF-16 units; parser limits can be smaller. Worker time limit: 15 seconds (regex 1.5 seconds).
Check the input and the result
- Prepare and choose the operation
Choose px or rem and stick with it, then set the minimum and maximum sizes and the viewport widths where the fluid scaling starts and ends.
- Check a concrete example
Use this sample and compare the indicated result: min=16 max=32 start=320 end=1280 unit=px → clamp(16px, calc(10.666667px + 1.666667vw), 32px)
- Check the output before you reuse it
Check the two viewport endpoints and some widths in between. Outside that interval, clamp holds the minimum or maximum.
Answers for this task
What does rem depend on?
rem uses the root font size. Use viewport and size units consistently, and test zoom instead of assuming the root is a fixed 16px.
What should I check if the input fails?
You need 0≤minimum≤maximum and 0<start viewport<end viewport. Equal viewport endpoints can't define a slope.
Where does this tool stop?
This generates linear fluid sizing. It is not a complete responsive type scale, so you still need to test line wrapping, zoom and user font settings.