CSS Clamp Calculator
Generate fluid, responsive CSS clamp() values for font-size, spacing, and more — with a live scaling preview and one-click copy.
CSS Clamp Calculator generates a fluid clamp() value that scales any CSS property (font-size, line-height, padding, gap, width, border-radius) smoothly between a minimum and maximum size across a viewport width range, with no media queries needed. Drag the simulated viewport slider to preview the scaling live, choose rem or px, and copy the generated CSS instantly. Runs entirely in your browser — no upload, no signup, no account. Made by FreeToolHub.
Fluid Settings
Live Preview
Aa
CSS Output
font-size: clamp(1rem, 0.6364rem + 0.1136vw, 2rem);
Scales from 1rem (16px) at a 320px viewport to 2rem (32px) at a 1200px viewport.
Quick Presets
Build fluid font sizes, spacing, and radii that scale smoothly across every screen size — no breakpoints required.
Frequently Asked Questions
What does this CSS clamp calculator do?
This tool calculates a CSS clamp() value that scales a property smoothly between a minimum and maximum size as the viewport width changes, without needing media query breakpoints. Enter your min/max viewport widths and min/max values, and it generates the exact clamp() declaration plus a live preview.
How is the clamp() value calculated?
It uses linear interpolation: the value grows in a straight line between your minimum size at the minimum viewport width and your maximum size at the maximum viewport width. The formula produces a slope in vw and an intercept, combined into clamp(min, intercept + slope*vw, max) so the browser scales it fluidly and clamps outside the range.
Why use rem instead of px for fluid values?
Rem values scale with the user's browser font-size setting (accessibility zoom), while px values stay fixed. Fluid values built in rem remain responsive to user font preferences on top of the viewport-based scaling; px is simpler but ignores those preferences.
Does this work for properties other than font-size?
Yes. While font-size is the most common use, the same clamp() formula works for any length-based CSS property, including line-height, letter-spacing, padding, margin, gap, width, max-width, and border-radius. Choose a property from the dropdown to change the output declaration.
What happens at or beyond the min and max viewport width?
At or below the minimum viewport width, the value stays fixed at your minimum. At or above the maximum viewport width, it stays fixed at your maximum. Between the two, it scales smoothly along the calculated line, which is exactly what clamp() enforces.
Is there a downside to fluid typography built only with vw units?
A pure vw value does not respond to the user's browser zoom level the way a rem value does, only to viewport width. Mixing an absolute rem term with a relative vw term, the intercept plus slope formula this tool uses, keeps the value anchored to rem so zooming still affects it, unlike a vw-only approach.