clamp(minimum, preferred, maximum) uses the preferred value while it sits between the bounds, but never resolves below the minimum or above the maximum. The preferred expression can be a fixed value, a viewport calculation or another valid CSS expression.How a CSS clamp calculator works
To create a linear fluid value, the generator finds the slope between two desired size/viewport points. It then calculates the intercept so the preferred expression equals the minimum size at the minimum viewport. The bounds protect the value outside the range.
change in size (px) ÷ change in viewport width (px) × 100 = vw coefficient intercept (px) = minimum size (px) − (vw coefficient ÷ 100 × minimum viewport) clamp(minimum, calc(intercept + coefficient × 1vw), maximum)
For a 1rem minimum and 3rem maximum over 360px to 1440px, with a 16px root size, the calculated preferred value is approximately calc(0.3333rem + 2.963vw). The full expression is clamp(1rem, calc(0.3333rem + 2.963vw), 3rem). At the endpoints, the preferred expression meets the requested size; outside the range, the minimum or maximum takes over.
Should the generator output rem or px?
For fluid typography, rem is a strong default because it relates to the root font size and can preserve scaling when users change their browser settings. Pixel-based values can be appropriate in some layout contexts, but don’t assume a fixed unit is accessible simply because its numerical value looks correct on your own screen.
CSS `clamp()` has broad modern-browser support. Still test your results with keyboard navigation, zoom, text enlargement and the real content that will use the rule. A mathematically smooth scale can still be a poor design decision if the minimum is too small or the maximum creates an awkward line length.
Where can you use a fluid value?
Use clamp for any property that accepts an appropriate length, such as font size, padding, margin, gap, width and border radius. Choose the property before you copy the output: a value designed for a type scale may not make sense as a width or spacing token.
When not to use clamp()
Clamp changes a value continuously between bounds. It doesn't choose a new layout structure. If a navigation bar needs to turn into a menu, a multi-column layout needs to stack, or component behavior changes at a breakpoint, media queries or container queries remain useful. A fluid value and a breakpoint-driven layout can work together.
For worked typography scales and accessibility notes, read the fluid typography guide. For a property-by-property collection, use the CSS clamp examples.