CSS clamp() Calculator
Calculate fluid CSS clamp() values for responsive font sizes and spacing based on your min and max viewport widths.
vw ignores the reader's browser zoom and default font size. Keeping a rem term in the middle argument — which this calculator always does — keeps the value zoomable and accessible.clamp(1rem, 0.6667rem + 1.6667vw, 2rem)
font-size: clamp(1rem, 0.6667rem + 1.6667vw, 2rem);
The quick brown fox
Your Data Never Leaves Your Device
Every tool runs entirely in your browser. Nothing you type is uploaded, stored, or logged on our servers.
The CSS clamp() Calculator replaces a stack of font-size media queries with one fluid declaration. Give it the size you want at a small viewport and the size you want at a large one, and it solves the line between those two points — returning a clamp() value that scales smoothly in between and stops cleanly at both ends.
The middle argument always keeps a rem term alongside the vw term. That detail matters: a preferred value built from vw alone ignores browser zoom and the reader's default font size, which is a WCAG 1.4.4 failure. Output in rem or px, set your own root font size, and pick the property — font-size, padding, gap, border-radius and more — to get the complete declaration.
Drag the viewport slider to see exactly what the browser would resolve the value to at any width, with a live text and length sample, plus a table showing where the value is still fluid and where it has hit a bound. Everything is calculated in your browser — nothing is uploaded.
FAQ
You give it a size at a small viewport and a size at a large viewport, and it works out the clamp() value that scales smoothly between them — replacing a stack of font-size media queries with a single declaration.
clamp(MIN, PREFERRED, MAX) resolves to max(MIN, min(PREFERRED, MAX)). The preferred value is a fluid expression that grows with the viewport, while the min and max act as floors and ceilings so the value never runs away at extreme screen sizes.
A preferred value made only of vw units ignores browser zoom and the reader's default font size, which is a WCAG 1.4.4 accessibility problem. Keeping a rem term in the middle argument — which this calculator always does — lets the value still respond to zoom while remaining fluid.
It solves the straight line through your two points. The slope is (max size − min size) ÷ (max viewport − min viewport), expressed as vw by multiplying by 100, and the intercept is the min size minus the slope times the min viewport, expressed in rem or px.
320px and 1280px are a common pairing — roughly the smallest phone in wide use up to a typical laptop. Widen the max to 1440px or 1920px if your layout keeps growing on large displays, or narrow the range if you only want scaling inside one breakpoint band.
Yes. The same math works for padding, margin, gap, width, and border-radius — pick the property from the dropdown and the tool writes the full declaration for you.
That produces a value that shrinks as the viewport grows, which is perfectly valid. The calculator orders the clamp() bounds smallest-first as CSS requires, so the result still scales down correctly instead of freezing at a constant.
Yes. clamp(), along with min() and max(), has been supported across Chrome, Edge, Firefox, and Safari since 2020, so it is safe for production use without a fallback in most projects.
No. The calculation and preview run entirely in your browser, so nothing you enter leaves your device.