The CSS Clamp Generator calculates the exact clamp() value for fluid, responsive sizing. Set a minimum and maximum size and the viewport range they should scale between, and it produces a clamp() expression that smoothly tweens between the two — perfect for fluid typography, spacing, and layout.
Instead of guessing a vw value or writing lots of media queries, clamp() lets one line handle the whole range. Enter your values in px or rem, watch the live preview scale as you resize the window, and copy the result. It all runs in your browser.
How to generate a clamp() value
- Enter the minimum and maximum size (in px or rem).
- Set the viewport range — the widths at which the min and max sizes apply.
- Adjust the root font size if yours is not 16px.
- Copy the clamp() value or the full font-size declaration.
How clamp() works
The CSS clamp() function takes three values — clamp(minimum, preferred, maximum) — and returns the preferred value while it stays between the minimum and maximum, otherwise it returns whichever bound is exceeded. For fluid sizing, the preferred value is a formula combining a fixed rem part and a viewport-relative vw part, so the size grows smoothly with the screen. Below your minimum viewport it locks to the minimum, and above your maximum viewport it locks to the maximum.
The math behind the preferred value
This tool computes the slope between your two points — (maxSize − minSize) ÷ (maxViewport − minViewport) — turns it into a vw value, and works out the rem offset so the line passes exactly through your min and max at the chosen viewports. For example, 16px at 600px scaling to 44px at 1440px yields clamp(1rem, -0.25rem + 3.333vw, 2.75rem). The result tweens perfectly between the two, which looks far smoother than picking an arbitrary vw.
Why rem and accessibility
The generator outputs the minimum and maximum in rem so the sizes respect a visitor’s browser font-size preference, which keeps text accessible. Using clamp() for fluid type also removes the jumps you get from breakpoint-based font sizes. Keep the minimum readable (around 16px for body text) so content stays legible on small screens, and use the live preview to sanity-check the range.
Frequently Asked Questions
What is the CSS clamp() function used for?
It sets a value that scales fluidly between a minimum and a maximum — most often for responsive font sizes, but also for padding, margins, and widths. One clamp() replaces several media queries.
How do I make fluid typography with clamp()?
Choose a min and max font size and the viewport widths they apply at; this tool gives you the clamp() expression that smoothly tweens between them.
Why does the output use rem?
rem-based sizes respect the user’s browser font-size setting, which is better for accessibility than fixed px. The tool converts using your root font size (16px by default).
What viewport range should I use?
A common choice is your smallest supported width (e.g. 320–400px) up to a comfortable maximum (e.g. 1200–1440px). Outside that range the value locks to the min or max.
Does clamp() work in all browsers?
Yes. clamp() is supported in all modern browsers, so the generated CSS works everywhere without fallbacks.