CSS clamp generator

How it works

Convert rem inputs to px using your root-size assumption. A straight line through the two endpoints gives the slope and intercept below. CSS Values 4 defines vw as one percent of viewport width, rem relative to the root font, and clamp() as a preferred value constrained by bounds.

slope = (max size − min size) / (max width − min width) intercept = min size − slope × min width preferred = intercept + (100 × slope)vw

For rem output, divide the bounds and intercept by the assumed root size. Calculations keep full precision; CSS coefficients use 12 significant digits and the sample table uses four decimal places. Root changes can shift the resulting endpoints.

WCAG 1.4.4 requires text to resize to 200% without losing content or functionality. The warning above a 2.5 maximum/minimum ratio is a tool heuristic, not a WCAG rule or conformance test. Test zoom and text resizing on the finished page.

Worked examples

16px to 32px across 320–1280px

With a 16px root, slope = 1/60 and intercept = 10.666667px. Output: clamp(1rem, 0.666666666667rem + 1.66666666667vw, 2rem). At 800px, size is 24px.

A simple rem range

For 1rem to 1.5rem across 20rem to 70rem, with a 16px root, output is clamp(1rem, 0.8rem + 1vw, 1.5rem). At 720px, size is 20px.

Frequently asked questions

Sources

• CSS Values 4 — units and clamp() (checked 2026-11-14)
• WCAG 2.2 — resize text (checked 2026-11-14)