Skip to content
TextArray1.41.0
100% local

CSS clamp() generator

Generate a fluid CSS clamp() value that scales smoothly between two viewport widths.

Output
Related tools
CSS unit converterDeveloper tools
CSS color variable extractornewDeveloper tools
Aspect ratio calculatorDeveloper tools
i18n key diffDeveloper tools
TOML to JSON converterDeveloper tools
SQL to JSONDeveloper tools
CSS clamp() generator
Fluid typography and spacing scale a value smoothly as the viewport resizes, instead of jumping between fixed sizes at a handful of media-query breakpoints. This tool builds that value for you: enter a minimum and maximum size and the viewport widths they apply at, and it returns a CSS clamp() function with a linear interpolation in between, ready to paste into a stylesheet.
Minimum size and maximum size set the two ends of the scale; minimum and maximum viewport width set where each end kicks in — below the minimum width the value stays at its floor, above the maximum it stays at its ceiling, and in between it grows linearly with the viewport. Unit switches the output between px and rem, with root font size controlling the px-to-rem conversion, and decimal places controls how much precision the generated numbers carry. Output format wraps the same clamp() as a plain declaration, a CSS custom property, or a Tailwind arbitrary-value class, so you can drop it straight into whichever codebase you're working in.
Turning on the accessibility check adds a note when the setup could cause trouble: px-based sizing ignores a reader's browser font-size preference, and a minimum that's too small stays hard to read even before it starts scaling up. Both are common mistakes in hand-written fluid type formulas, and the tool flags them instead of shipping them silently.
Everything is computed in your browser as you adjust the options — nothing you enter is sent anywhere. When the result looks right, copy it, download it as a .txt file, or send it to another tool's input to keep working on it.
FAQ
What does clamp() actually do?
clamp(min, preferred, max) picks the preferred value but never lets it go below min or above max — here the preferred value grows linearly with the viewport width, so the result scales smoothly between your two size endpoints.
Why choose rem over px?
A rem-based size scales with the root font size, so it still respects a reader who has changed their browser's default text size. A px-based size stays fixed regardless of that preference, which is why the accessibility check flags it.
What is root font size for?
It is the px value 1rem represents on the page you are styling — 16 by default in every browser unless you or a reset stylesheet changes it. The tool uses it to convert your px sizes into accurate rem values.
Can I use the Tailwind output directly in a class attribute?
Yes. It is a complete arbitrary-value class such as text-[clamp(1rem,0.8rem+1vw,2rem)] with the spaces removed, which is exactly the syntax Tailwind expects.
Is my input uploaded anywhere?
No. Every calculation happens in your browser — the numbers you enter never leave your device.