CSS Clamp() Calculator
Compute a real fluid CSS clamp() value from a min and max size across two viewport widths, with the slope and intersection shown step by step and a live resize preview.
Processed entirely in your browser — nothing you enter here is ever uploaded.
Result
About this tool
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.
Example. A size from 16 px to 32 px between viewports 320 px and 1280 px copies clamp(16px, 10.6667px + 1.6667vw, 32px).
Limit. The maximum viewport must be greater than the minimum, and every size input must be positive.