CSS Clamp Generator
Build a fluid clamp() value that scales smoothly between a minimum and maximum size as the viewport changes. Set your sizes and breakpoints, preview the curve, and copy the CSS.
clamp(1rem, 0.609rem + 1.739vw, 2rem)
The quick brown fox
FAQ
What is CSS clamp() used for?
clamp(min, preferred, max) lets a value scale fluidly between a minimum and maximum. It is the cleanest way to do responsive typography and spacing without piling up media queries.
Why does the output mix rem and vw?
The middle term is a line that grows with the viewport (the vw part) offset by a fixed base (the rem part). Together they scale the size smoothly between your two breakpoints, then clamp() holds it at the min and max outside that range.
Should I use px or rem for the sizes?
Enter your sizes in px for convenience; the tool outputs rem so the value respects the user's browser font-size settings, which is better for accessibility.
Now design the whole app.
Bender turns a prompt into a full set of themed mobile screens you can edit, test, and export. Free to start — no credit card.
Try Bender free