Generate a CSS clamp() value that scales font size or spacing smoothly between two screen widths.
CSS clamp() lets font sizes and spacing grow smoothly between a minimum and maximum as the screen widens — no media queries needed. Enter your sizes and breakpoints to get the exact clamp() value, see the computed size at common screen widths and preview it live.
The quick brown fox jumps over the lazy dog.
Minimum and maximum size in px and the viewport widths where each applies.
The calculator works out the slope and intercept and writes the value in rem + vw, so it respects user font settings.
See sizes at common widths and resize the preview box, then copy the CSS.
Correct rem-based output (respects browser zoom and font settings)
Table of sizes at 320–1920 px
Live resizable preview
Works for font-size, spacing, gaps and widths
More developer utilities: convert Linux file permissions.
slope = (maxSize − minSize) / (maxViewport − minViewport) intercept = minSize − slope × minViewport clamp( minSize/16 rem , intercept/16 rem + slope×100 vw , maxSize/16 rem )
Example: 16 px at 375 px wide to 24 px at 1280 px wide gives slope 0.00884 and intercept 12.685 px, so clamp(1rem, 0.7928rem + 0.884vw, 1.5rem).
slope = (max size − min size) ÷ (max viewport − min viewport); intercept = min size − slope × min viewport. The preferred value is intercept (in rem) + slope × 100 (in vw), clamped between the min and max sizes.
rem scales with the user’s browser font-size setting, which keeps text accessible. Mixing a rem intercept with a vw slope also keeps zoom working, unlike pure vw values.
Yes — clamp() is supported in all current major browsers (Chrome, Edge, Firefox and Safari) and has been for several years.
Yes. Any length property — padding, margin, gap, width — can use the same fluid value.