CSS clamp() Generator

Generate clamp() values for fluid typography and spacing. Specify the min and max value at the min and max viewport, the calculator returns the clamp(min, preferred, max) CSS that scales smoothly between them.

How to use the CSS clamp() Generator

Set the value you want at the smallest viewport (typically 320px or 360px for mobile), and the value at the largest viewport you care about (typically 1280px or 1440px for desktop). The clamp scales linearly between them. The preview shows what the computed value would be at common breakpoints.

Why clamp() over media queries

Before clamp(), fluid sizing meant a stack of media queries: 14px at <480px, 16px at 480-768px, 18px at 768-1024px, etc. Step-wise, with visible jumps at each breakpoint. clamp() replaces all of that with one CSS value that interpolates linearly between viewport sizes. The output is smoother and more compact.

Typical uses: font-size, padding, gap, border-radius. Avoid for line-height (use a unitless multiplier instead) or any value where you specifically want fixed steps.