CSS clamp() Generator for Fluid Sizes

A clamp() generator writes fluid CSS: values that grow gradually with the screen width instead of jumping at media-query breakpoints. Fluid typography keeps headings proportional on every device, from a small phone to a wide monitor, with a single line of CSS.

Enter the size you want at the smallest and largest screens and the viewport widths between which it should scale. The generator does the linear maths, writes the clamp() in rem and vw, and lets you drag a viewport slider to see the resulting size at any width.

Between the two viewports the size follows a straight line: slope = (max size − min size) ÷ (max viewport − min viewport), and intercept = min size − slope × min viewport. The preferred value is intercept (in rem) + slope × 100 (in vw), clamped between the minimum and maximum sizes.

Sizes are written in rem so they respect the reader's browser font-size setting, which matters for accessibility. Very steep slopes can stop text growing when users zoom, so keep the range modest for body text.