CSS Clamp Calculator
Generate a responsive CSS clamp value for fluid font sizes and spacing, scaling smoothly between two viewport widths without media queries.
A hand-picked vw number chooses your breakpoints for you
clamp() is usually explained as "small on phones, large on desktops, fluid in
between". What goes unsaid is that you do not choose where "in between" is. The viewport widths
at which the value locks are decided entirely by the middle term — it locks at the minimum
where the preferred value equals the minimum, and at the maximum where it equals the maximum.
Pick the vw number by eye and you have picked two breakpoints without noticing.
| Written by hand | Fluid only between | Ordinary devices inside that window |
|---|---|---|
clamp(1rem, 4vw, 2rem) | 400px – 800px | iPad portrait |
clamp(1rem, 5vw, 1.5rem) | 320px – 480px | iPhone SE, iPhone 15 |
clamp(1.125rem, 2vw, 1.75rem) | 900px – 1400px | small laptop |
clamp(1rem, 2.5vw, 1.5rem) | 640px – 960px | iPad portrait |
clamp(1rem, 4vw, 2rem) is the version that appears in every tutorial, and it is fluid only
from 400px to 800px. Below 400 it is a flat
16px; above 800 it is a flat 32px. Of five ordinary device
widths — a small phone at 375, a current phone at 393, an iPad at 768, a laptop at 1280, a
desktop at 1920 — exactly one falls inside that window. The other four get a
constant from an expression written to be fluid.
Solving for the two points you actually care about fixes this, and there is nothing to guess:
through any two points (viewport, size) there is exactly one straight line, and it is what the
calculator above produces. Asking for 16px at 375 and 32px at 1920 gives
clamp(1rem, 0.7573rem + 1.0356vw, 2rem),
which reads 20px on the iPad and
25px on the laptop rather than pinning both.
The rem term is not decoration — it is the accessibility half
A pure vw preferred value looks tidier, and it costs you the reader's font-size
setting. Full-page zoom is fine: zooming scales the CSS pixel, so vw scales with it. The
setting that breaks is the browser's default font size, which is what readers who need
larger text usually change. That scales rem and does not touch vw at
all.
| Preferred value | At 16px default | At 24px default | Growth |
|---|---|---|---|
2vw (pure vw) | 20.00px | 20.00px | none at all |
0.8333rem + 0.8333vw | 21.67px | 28.33px | 30.8% |
1rem (no vw) | 16.00px | 24.00px | 50% |
A reader moving their default from 16px to 24px has asked for text 50% larger. The pure-vw version gives them nothing — the number on screen is identical. The rem+vw version gives them 30.8%, which is partial rather than complete, because the vw half of the expression is not meant to move. Worth being straight about: adding a rem term does not make a fluid value fully responsive to the setting. It makes it responsive at all, which is the difference that matters.
The same logic applies to the bounds. A maximum written in px is a hard ceiling
that never moves; the same maximum in rem rises with the reader's setting, so
large text is not silently capped at the size you chose for yourself. That is why the
calculator emits rem for all three arguments even though you type pixels — pixels are the
convenient way to think about it and the wrong way to ship it.
How to use
- Set the minimum and maximum size you want.
- Set the viewport widths those sizes apply at.
- Copy the generated clamp value.
- Check the result at both ends and in the middle.
Frequently asked questions
What does clamp actually do?
Takes three values — a minimum, a preferred and a maximum — and returns the preferred one unless it falls outside the bounds. Combined with a viewport unit in the middle value, it produces a size that scales with the window but never goes below or above the limits you set.
Why use it instead of media queries?
Because it scales continuously rather than jumping. Media queries change the size in steps at fixed breakpoints, so a heading is one size at 767 pixels and another at 768. Clamp interpolates smoothly across the whole range, which reads better and needs far less code.
How is the middle value calculated?
As a line through the two points you specified: a fixed base plus a viewport-width multiplier, arranged so the result equals your minimum at the lower viewport and your maximum at the upper. The arithmetic is fiddly by hand, which is the reason this tool exists.
Is there an accessibility problem with viewport units?
Yes, and it is the reason the fixed component matters. Text sized purely in viewport units does not respond to the user's browser zoom or font size preference, which fails WCAG. Including a rem-based term in the preferred value — as this tool does — keeps the text responsive to user settings.
Can I use clamp for anything besides font size?
Yes. Padding, margins, gaps, widths and border radii all benefit from the same treatment, and fluid spacing is arguably more useful than fluid type, since fixed padding looks cramped on large screens and wasteful on small ones.
What browser support does it have?
Universal in current browsers and has been for several years. It is safe to use without a fallback for any audience on a browser still receiving updates.
🔒 This tool runs entirely in your browser. Nothing you enter is uploaded, logged, or stored.