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.

Preview at various widths

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.

Frequently asked questions

What does clamp(min, preferred, max) actually do?
It returns the preferred value but never below the min or above the max. For fluid type the preferred part is a viewport-based formula, so text scales smoothly between two screen sizes.

What units should I use?
Use rem or px for the min and max values and viewport widths. The generated preferred value mixes rem and vw so it scales with the viewport while staying friendly to browser zoom.

Does clamp() work in all browsers?
Yes. clamp() has been supported in all current browsers since 2020, so it is safe to use in production.
Embed this tool on your site

Free to embed, no attribution required (but appreciated). Paste this where you want the tool to appear: