The Free Clamp Generator
Build a copy-ready CSS clamp() value for fluid,
responsive typography. Set your min and max font size, pick the viewport range — done.
No rem-and-vw math, no sign-up, no limits.
Your values
Your clamp()
Fluid typography
What is CSS clamp()?
CSS clamp() takes three values —
minimum, preferred, and maximum — and returns the preferred value while
never going below the minimum or above the maximum. For typography, the preferred value blends
rem and vw units, so your text
scales smoothly with the screen width and stays locked at both ends.
The hard part is the math: you need the right slope and intercept so the size hits exactly your minimum at the small viewport and your maximum at the large one. This generator does that for you and hands back a clean, copy-ready value like:
font-size: clamp(1rem, 0.7rem + 1.5vw, 1.5rem);
How to use this clamp generator
-
1
Set your font sizes
Enter the smallest size you want on mobile and the largest on desktop.
-
2
Set the viewport range
Pick where scaling starts and stops — 320px to 1280px is a solid default.
-
3
Pick the output unit
Keep rem (recommended for accessibility) or switch to px. Set your root size if it is not 16px.
-
4
Copy the result
Hit copy and paste the clamp() value straight into your CSS — for font-size, padding, gap, anything.
Frequently asked questions
What is a CSS clamp generator? +
A clamp generator builds a CSS clamp() value for you. You enter a minimum and maximum font size plus the viewport range to scale across, and it outputs a clamp(min, preferred, max) expression that grows fluidly between those sizes — no manual rem and vw math.
What does the CSS clamp() function do? +
clamp(MIN, PREFERRED, MAX) returns the PREFERRED value but never lets it drop below MIN or rise above MAX. For typography the preferred value mixes rem and vw, so the text scales with the viewport while staying clamped at both ends.
Is this clamp generator free? +
Yes. It is completely free, needs no sign-up, and has no usage limits. The site is funded by unobtrusive ads.
Why use rem and vw together in clamp()? +
The vw part makes the size respond to viewport width, while the rem part sets the baseline and respects the user’s root font size for accessibility. Combined inside clamp(), they give smooth fluid scaling that still honours user zoom and font preferences.
What min and max viewport should I use? +
A common range is 320px (small phones) to 1280px or 1440px (laptops/desktops). The font size hits its minimum at or below the small width and its maximum at or above the large width, scaling linearly in between.
Should I output clamp() in rem or px? +
Prefer rem. rem-based clamp() respects the user’s browser font-size setting, which is better for accessibility. This generator outputs rem by default and lets you set the root font size (16px by default).
Does clamp() work in all browsers? +
Yes. CSS clamp() is supported in all modern browsers (Chrome, Firefox, Safari, Edge) since 2020. For very old browsers, provide a static font-size fallback before the clamp() declaration.
Can I use clamp() for spacing and not just font size? +
Absolutely. clamp() works for any length: padding, margin, gap, width, line-height and more. The same min/preferred/max logic applies — this tool focuses on typography but the output is valid for any CSS length property.