CSS Clamp() Calculator
NEWGenerate a fluid font-size that scales smoothly between two viewport widths, no media queries needed.
Frequently asked questions
What does the generated value actually do?
Below the min viewport width, the font stays fixed at the min size; above the max width, it stays fixed at the max size; in between, it scales linearly using a `vw`-based calculation — all in a single `clamp()` value with no media queries.
Why does the CSS use rem instead of px?
Using rem throughout means the fluid size still scales correctly if a user has changed their browser's default font size for accessibility — a pure px/vw-based clamp would ignore that setting.
Can I use this for spacing or width, not just font-size?
Yes — the generated `clamp()` value works the same way for any CSS length property, like `padding`, `margin`, or `width`; just paste it into a different property than `font-size`.
Related tools
CSS Gradient Generator
Create beautiful CSS linear and radial gradients visually.
Box Shadow Generator
Generate CSS box-shadow values with live preview.
Border Radius Generator
Generate CSS border-radius values for any shape.
CSS Button Generator
Design and generate CSS buttons visually with live preview.