Loading page
About this tool
Build a responsive CSS clamp() value.
The CSS Clamp Generator assembles a `clamp(min, preferred, max)` declaration from three numbers you supply: a minimum size in px, a preferred size in viewport width units, and a maximum size in px. It is for anyone writing fluid typography or spacing who wants the value to scale with the viewport but never fall below a readable floor or grow past a sensible ceiling. The defaults — 16px, 4vw, 48px — produce `clamp(16px, 4vw, 48px)`, ready to paste into a font-size or padding declaration.
Open CSS Clamp Generator on AltFTool — it loads instantly in your browser.
Set 'Min (px)', which starts at 16, to the smallest size the value may shrink to; it becomes the first argument of the generated clamp().
Set 'Max (px)', which starts at 48, to the ceiling; it becomes the third argument, so the value never grows past it however wide the viewport gets.
Set 'Preferred (vw)', default 4, for the fluid middle term — the field is in vw units, not percent. The Result recomputes as you type into a ready-to-paste value such as clamp(16px, 4vw, 48px), captioned 'responsive size' with Min and Max echoed below it; Copy places a summary containing that 'Result:' line on the clipboard.
You supply the floor, the fluid middle and the ceiling, and the correctly ordered clamp() string comes back — no remembering which argument goes where.
The result restates your min and max with units attached, so a mistyped digit is visible before the value reaches your stylesheet.
One clamp() covers the whole viewport range, which removes the breakpoint-by-breakpoint font-size overrides that usually go stale first.
It returns the preferred value, but clamped: never smaller than the minimum and never larger than the maximum. Written as `clamp(16px, 4vw, 48px)`, the size is 4% of the viewport width, floored at 16px and capped at 48px.
Where the preferred value crosses each bound. With 4vw, the 16px floor is reached at a 400px viewport (16 ÷ 0.04) and the 48px ceiling at 1200px (48 ÷ 0.04), so the size is fluid only between those two widths.
Yes in current browsers, and the minimum bound is what protects accessibility — it stops text shrinking below a legible size on narrow screens. Using a vw-only preferred value does mean the text no longer responds to the user's browser zoom in the same way, so keep the floor generous.
Pixels for the minimum and maximum, and vw for the preferred value, which is the most common combination for fluid type. clamp() itself accepts any comparable length units, so you can swap px for rem in the output by hand if your project uses rem-based sizing.