CSS Clamp Generator
Build fluid CSS values with clamp(). Set the minimum and maximum values plus the viewport range you want them to scale across — the tool computes the exact clamp() function that produces linear interpolation between them. Perfect for fluid typography and responsive spacing without media queries.
font-size: clamp(1rem, 0.8261rem + 0.8696vw, 1.5rem);
About CSS Clamp Generator
CSS clamp(min, preferred, max) is the modern replacement for chains of media queries when you want a value that scales smoothly with the viewport. Fluid typography is the classic use case: a heading that reads 32px on mobile and 64px on desktop, transitioning linearly in between, no breakpoint jumps. This generator computes the exact clamp() function from four inputs (min value, max value, min viewport, max viewport), gives you a live preview at any viewport width, and produces REM output that respects user font-size preferences.
The generator uses the standard fluid-typography formula (linear interpolation between two viewport-value pairs) and outputs a preferred value combining rem base and vw scaling. This is the same math taught in every fluid-typography tutorial and used by libraries like Utopia — the difference here is you set the inputs directly and get the CSS immediately, without dependencies. Ideal for headline sizing, spacing scales, and any responsive value where you want smooth scaling instead of hard breakpoint jumps.
How to Use
Set the min value (font-size, padding, etc. in px) at your smallest supported viewport.
Set the max value at your largest viewport.
Set the viewport range — where the value should transition (typically 320-1240px for mobile-to-desktop).
Drag the preview slider to see what the value looks like at any viewport width.
Copy the generated clamp() and drop it into your CSS. Works everywhere CSS custom properties do (2020+).
Frequently Asked Questions
What is the CSS clamp() function?
clamp(min, preferred, max) returns the preferred value clamped between min and max. When the preferred value uses viewport units (vw), the result scales linearly with the viewport — but never below the min or above the max. It's fluid typography without media queries.
Should I use px or rem in my clamp()?
REM is preferred because it respects the user's browser font-size setting — critical for accessibility. This tool defaults to REM output. Toggle to PX mode if your project uses fixed pixel values (rare in modern responsive design).
What is the vw portion of the preferred value?
vw is 1% of the viewport width. The calculated coefficient (e.g., 0.87vw) is derived from the slope of the linear line between (minViewport, minValue) and (maxViewport, maxValue). It's what makes the value scale — larger viewport = larger vw = larger clamped value.
Is browser support good?
Yes — CSS clamp() has been supported in every major browser since 2020. Safari 13.1, Chrome 79, Firefox 75, Edge 79 and every version since. No fallbacks needed for modern projects.
How does this compare to fluid-typography libraries like Utopia?
Utopia and similar libraries generate whole type scales — a series of related clamp() values for h1, h2, h3, body. This tool generates one clamp() at a time. Great for spot use; if you're building a full type system, Utopia's approach may fit better.