CSS Clamp Generator
Build a responsive font size with CSS clamp() right in your browser. Set a minimum and maximum size, pick the viewport range, and copy a fluid clamp() value that scales smoothly. This clamp calculator outputs rem for accessibility, and nothing is uploaded.
How to generate a clamp() value
Set your min and max font size
Enter the smallest size for narrow screens and the largest for wide screens. Use px or rem, whichever you think in.
Pick the viewport range
Set the minimum and maximum viewport width, for example 320px to 1280px, where the font size should scale between your two limits.
Copy the clamp() value
Read the generated font-size: clamp() line, check it against the live preview slider, and copy it into your CSS.
About the CSS clamp generator
Responsive text used to mean writing the same font-size three times, once per media query breakpoint, and watching it jump at each one. CSS clamp() replaced that. You give it a minimum size, a maximum size, and the viewport range in between, and the browser scales the text smoothly across every width. This CSS clamp generator writes that value for you and shows it updating in a live preview, so you can tune a responsive font size in a few seconds instead of guessing at breakpoints.
What is CSS clamp() and why use it?
clamp() is a CSS function that holds a value between a floor and a ceiling. It takes three arguments: a minimum, a preferred value, and a maximum. For a font size, the preferred value is tied to the viewport, so the text grows as the screen gets wider, but it never drops below your minimum or climbs past your maximum. The payoff is real: one clamp() line can replace two or three font-size media queries per heading, which is less CSS to write and far less to keep in sync.
Why does this clamp generator output rem instead of px?
A clamp() built from px looks fine until a reader changes their browser font size or zooms in. px ignores that setting completely, so the text stays locked and the page fails the WCAG resize check. rem is tied to the root font size, so it scales with the reader preference. That is why this fluid typography calculator converts everything to rem in the output, even when you type your sizes in px. You still think in the unit you know, and the result stays accessible.
How do I use clamp() for fluid typography?
Set a minimum font size for small screens, a maximum for large screens, and the viewport range where the scaling should happen, often 320px to 1280px. The tool runs a linear interpolation between those points and writes the middle calc() value for you. Drag the preview slider from 200px to 1300px to watch the size change and read the exact pixel value at each width. When it looks right, copy the one-line clamp() value straight into your stylesheet.
Why use this CSS clamp generator
Fluid, Not Stepped
One clamp() value scales the font size smoothly across every screen width, so text grows pixel by pixel instead of jumping at media query breakpoints. A single line replaces the two or three font-size rules you would otherwise write.
rem Output for Accessibility
The generated value uses rem, not px, so it respects a reader browser font-size setting and zoom. A px clamp ignores that setting and fails the WCAG resize check, so rem is the accessible default here.
Live Preview
A viewport slider from 200px to 1300px shows the exact font size at any width, with the computed pixel value next to it. You see how the value scales before you paste it into your CSS.
px or rem Input
Type your sizes in px or rem and switch units per field. When you change a unit the tool converts the number so the real size stays the same and the clamp() math stays correct.
Nothing Leaves Your Device
The clamp() value is built inside your browser. Nothing is uploaded to a server, so your work stays private and the generator keeps working even after you go offline.
One-Click Copy
Copy a ready-to-paste font-size: clamp() line with one click. Drop it straight into your stylesheet, with no media queries to maintain and no fallback cleanup afterward.
Similar Tools
More Developer tools you might find useful.
Frequently Asked Questions
Common questions about CSS clamp() and fluid typography.
What does the CSS clamp() function do?
clamp() takes three values, a minimum, a preferred, and a maximum. It returns the preferred value, but never below the minimum or above the maximum. For a font size that means the text scales with the viewport between two fixed limits, so one line of CSS does the job of several media queries.
Why should I use rem instead of px inside clamp()?
A px value inside clamp() ignores the reader browser font-size setting, so the text will not grow when someone zooms or sets a larger default. rem respects that setting, which is why this generator always outputs rem. It is the difference between passing and failing the WCAG text-resize requirement.
How is the preferred value calculated?
The tool uses linear interpolation. It finds the slope between your two sizes across the viewport range, works out the intercept, and writes them as calc(intercept + slope vw). That expression is the middle argument of the clamp(), so the size follows a straight line from your minimum to your maximum.
Can I use clamp() for things other than font size?
Yes. clamp() works on any length property, so the same value fits padding, margins, gaps, container widths, and border radius. Fluid spacing scales a layout the way fluid type scales text, with one value instead of three or four breakpoints to keep in sync.
Does clamp() work in all browsers?
clamp() is supported in Chrome 79, Firefox 75, Safari 13.1, and Edge 79 and later, which covers over 94 percent of users worldwide. For a very old browser, add a plain font-size line before the clamp() line, and that browser falls back to the fixed size.
Is this a fluid typography calculator or a clamp generator?
It is both. A fluid typography calculator and a CSS clamp generator do the same job, they turn a minimum size, a maximum size, and a viewport range into one responsive clamp() value. This tool adds a live preview so you can check the result at any width before you ship it.
Can clamp() replace media queries for font sizes?
For scaling one size up and down, yes. A single clamp() value removes the two or three font-size media queries you would otherwise write for a heading. You still need media queries for layout changes, such as switching a grid from one column to two columns.
Is the CSS clamp generator free?
Yes, it is free with no sign up and no limit. The whole calculation runs in your browser, so you can generate as many responsive clamp() values as you want, and nothing you type is sent to a server.