CSS Clamp Generator
Generate a CSS clamp() value for fluid, responsive sizing between a minimum and maximum.
Sizes that scale with the screen
The CSS clamp function lets a value — a font size, a spacing, a width — scale smoothly with the screen size between a minimum and a maximum, so text and layout adapt without a jumble of breakpoints. This generates a clamp value from your minimum, maximum and how it should scale, and copies the code.
Set your minimum and maximum sizes to generate the clamp value.
Fluid sizing done right
Clamp solves a real problem elegantly: instead of setting a font size that jumps at fixed screen widths, you give a smallest acceptable size, a largest, and a rule for scaling between them, and the browser interpolates smoothly. This is the modern way to do fluid typography, where headings grow gracefully from phone to desktop rather than lurching at breakpoints. The minimum and maximum are the safety rails — they stop text becoming unreadably small on phones or absurdly large on wide screens, which pure viewport-based scaling risks. Generating the value, rather than hand-writing the clamp expression with its slightly awkward middle term, takes the fiddliness out of an otherwise excellent technique.
Frequently asked questions
What does clamp() do?
It lets a value scale smoothly with the screen between a minimum and maximum, so sizes adapt fluidly without breakpoints jumping.
Why set a minimum and maximum?
They are safety rails — stopping text becoming unreadably small on phones or absurdly large on wide screens, which pure viewport scaling risks.
Is anything uploaded?
No. The value is generated in your browser.