CSS Clamp() Calculator
Generate fluid, responsive CSS clamp() values for font-size, padding, and more — no media queries needed. Free, instant, no sign-up.
Configuration
Viewport Width Range (px)
Size Range (px)
Usually 16px unless your project changes the html font-size.
Generated CSS Rule
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
Just the value:
Fluid Curve Preview
Aa Fluid Text
100% client-side — nothing you enter here is sent to a server.
Support Our Free Tools
If you find this calculator helpful, please consider supporting our work. Your contribution helps us build and maintain these free tools for everyone.
Buy me a coffeeFree CSS Clamp() Calculator for Fluid Design
clamp() lets you size text, padding, gaps, or any length property so it scales smoothly with the viewport — no breakpoints, no media queries. The tricky part is the middle "preferred" value, which needs to be a specific linear function of viewport width to hit your exact min and max sizes at the right breakpoints. This calculator works out that math for you: set your two size/width pairs, and get a copy-paste-ready clamp() value instantly.
How CSS Clamp() Works
clamp(MIN, PREFERRED, MAX) evaluates all three values and picks the PREFERRED one — unless it's smaller than MIN or larger than MAX, in which case it's clamped to that boundary instead. For fluid design, PREFERRED is written as a viewport-width-based formula so it grows linearly between your two breakpoints:
📏 Below min width
The value stays fixed at your minimum size — it never gets any smaller.
📈 Between the two widths
The value scales linearly with viewport width, following the calculated vw-based formula.
🔒 Above max width
The value stays fixed at your maximum size — it never gets any larger, so text won't balloon on huge screens.
The Formula Behind the Calculator
Given a minimum size at a minimum viewport width, and a maximum size at a maximum viewport width, the slope and the vw-based preferred value are calculated as:
slope = (maxSize − minSize) / (maxWidth − minWidth)
intersection = minSize − minWidth × slope
preferred = intersection + (slope × 100)vw
That "intersection" value is where the line would cross a 0px-wide viewport — it's not meaningful on its own, but combined with the vw term it produces the exact linear scaling you asked for between your two breakpoints. This calculator handles all of that automatically, including converting the result to rem if you'd like.
Frequently Asked Questions
What is CSS clamp()?
clamp() is a CSS function that takes a minimum value, a preferred value, and a maximum value, and picks the preferred value as long as it falls between the other two — clamping it to the min or max otherwise. It's commonly used with a viewport-width-based preferred value to create fluid, responsive sizing without media queries.
How is the preferred value calculated?
The preferred value is a linear function of viewport width, calculated from the two size/width pairs you provide, expressed as a fixed value plus a vw unit (for example, 0.75rem + 1.25vw). This calculator works out that formula for you.
Should I use rem or px for the output?
rem is generally recommended, since it respects a user's browser font-size preference for accessibility, while a value in raw px does not. This calculator can output either.
Can I use clamp() for spacing, not just font-size?
Yes. clamp() works with any CSS length property, including padding, margin, gap, width, and border-radius — this calculator works the same way regardless of which property you apply it to.
Is CSS clamp() well supported by browsers?
Yes. clamp() has been supported in all major modern browsers (Chrome, Firefox, Safari, and Edge) since 2020, and is considered safe to use in production for most projects today.
Explore More Free Developer Tools
The CSS Clamp() Calculator is part of Texterfly's growing collection of free developer tools — no sign-up, nothing uploaded to a server.
Explore All Tools
134 free tools — no signup required
All 134 tools are free · No signup · No ads