CSS clamp() Calculator

Type the value you want at a small and a large viewport, get a ready-to-paste clamp() expression that scales fluidly in between. Common breakpoint and font-size presets, a live preview, and copy with one click. Pure client-side math, no upload.

Breakpoints (viewport width)
Target values
CSS output 
—
Min stop —
Preferred (linear) —
Max stop —
Live preview drag the slider (or type) to set the viewport width — the sample below scales with your clamp().

The quick brown fox jumps over the lazy dog.

—
How is this computed?

Given a desired value at two viewport widths, the calculator finds the linear function that interpolates between them, then writes that function as clamp(min, preferred, max) using the modern fluid-typography pattern: the preferred size is expressed as slope × 100vw + intercept, with both terms in rem so the result respects the user's root font-size preference.

The preferred term is written in rem even when you picked px or em for the stops — that's intentional, so the linear part scales with viewport while the stops stay in your chosen unit. The preferred-size slope is slope × 100 (the per-100px convention), which is what makes the linear term compose cleanly with vw.