CSS Clamp() Calculator

CSS clamp(MIN, PREFERRED, MAX) lets one declaration replace a whole stack of media queries: the value stays at MIN below the smallest viewport, at MAX above the largest, and scales smoothly in between. The hard part is the PREFERRED term — a viewport-relative expression such as 0.833rem + 0.833vw — that nobody wants to derive by hand. This calculator computes it for real from four numbers: a minimum size, a maximum size, and the viewport width at which each one applies.

Every intermediate number is shown, not just the final line: the slope (how many size units the value grows per pixel of viewport), that same slope expressed as a vw coefficient, and the y-axis intersection — the constant added to the vw term so the line passes through exactly the two points you specified. Anyone who has pasted a clamp() value from a tutorial without understanding it can see, and check, the actual arithmetic here.

A viewport-width slider drives a live preview box, so the fluid scaling is visible, not just computed: drag it between the min and max breakpoints and watch the sample text resize exactly as it would while a real browser window is resized. The output line and the breakdown update on every keystroke — this pairs naturally with the px to rem converter when the base font size itself needs converting too.

Switch to type-scale mode for a complete fluid typography system in one step: enter a base size and a modular ratio (1.125 up to 1.5) and get six sizes — small, base, h4, h3, h2 and h1 — each computed as its own clamp() line between a gentler mobile progression and the full desktop ratio, ready to copy as a block of CSS custom properties.