CSS clamp calculator & fluid typography scale

The CSS clamp() function lets a value scale smoothly between a minimum and a maximum as the viewport changes — fluid typography and spacing without media queries. But writing the middle term (the viewport-relative expression that controls the slope) is a bit of maths. This calculator computes the exact clamp() expression for you, with an interactive viewport slider, a breakdown of the slope, and complete modular type scales.

Fluid values give a design that adapts continuously rather than jumping at fixed breakpoints, and doing it in one clamp() removes a stack of media queries. Seeing the value change as you drag the viewport slider confirms it behaves as intended across the whole range.

It runs in your browser, so it is instant. Use it for fluid font sizes, responsive spacing and margins, or to generate a full modular type scale that flexes with the viewport.