CSS clamp() Generator
Generate a fluid CSS clamp() value for responsive typography and spacing: set the smallest and largest size and the viewport range, see the line on a graph, and copy the exact clamp() declaration.
How to Use
- Choose rem output (recommended, respects browser zoom) or px.
- Enter the smallest size and the viewport width where it applies, then the largest size and its viewport width — commonly 320 and 1280 px.
- Leave the root font size at 16 unless your
htmlelement uses a different base, and pick the property (font-size, padding, gap and others). - Drag the Test viewport slider to see the size at any screen width on the graph and in the preview.
- Read Show Work for the slope, intercept and checks at each width, then press Copy for the declaration.
The quick brown fox jumps over the lazy dog.
font-size: clamp(1rem, 0.6667rem + 1.6667vw, 2rem);
Worked Example
Body text, 16 px at 320 to 20 px at 1280, root 16. Slope = (20 − 16) ÷ (1280 − 320) = 4 ÷ 960 = 0.0041667, so the vw term is 0.0041667 × 100 = 0.4167vw. Intercept = 16 − 0.0041667 × 320 = 16 − 1.3333 = 14.6667 px = 14.6667 ÷ 16 = 0.9167rem. The bounds are 16 ÷ 16 = 1rem and 20 ÷ 16 = 1.25rem:
font-size: clamp(1rem, 0.9167rem + 0.4167vw, 1.25rem);
Check at an 800 px window: 14.6667 + 0.0041667 × 800 = 14.6667 + 3.3333 = 18 px, half-way between 16 and 20, as it should be half-way between 320 and 1280. At 1920 px the line would give 22.6667 px, so the max bound holds it at 20 px.
A heading, 32 px at 360 to 56 px at 1440. Slope = 24 ÷ 1080 = 0.022222 → 2.2222vw; intercept = 32 − 0.022222 × 360 = 24 px = 1.5rem: clamp(2rem, 1.5rem + 2.2222vw, 3.5rem).
The common mistake: sizing text in vw alone. font-size: 1.5vw looks right on a 1280 px laptop (19.2 px) but is 4.8 px on a 320 px phone and 28.8 px on a 1920 px monitor, and browser zoom does nothing to it. The clamp() line above never goes below 16 px or above 20 px, and its rem part grows when the reader zooms.
Show Work
Formulas
From Media Queries to clamp()
Viewport units (vw, vh) arrived with CSS Values and Units Level 3 around 2012, and designers soon tried sizing text with them. Mike Riethmuller’s 2015 “precise control over responsive typography” technique combined a fixed size with a vw term inside calc() — the same straight line used here — but needed media queries to stop the text growing forever.
min(), max() and clamp() were defined in CSS Values and Units Level 4 and shipped in every major browser in 2019–2020 (Safari 11.1 had min/max first; clamp() followed in Chrome 79, Firefox 75 and Safari 13.1). With the bounds built into the value, a whole stack of font-size media queries collapses into one declaration. Utopia (utopia.fyi, 2020) popularised generating full fluid type and spacing scales this way.
About This Tool
This tool turns two sizes at two screen widths into a clamp() value: it finds the slope and intercept of the straight line through them, converts them to vw and rem (or px), and writes the declaration for font-size, line-height, spacing, width or a CSS variable. The graph shows the flat minimum, the fluid ramp and the flat maximum, and the test slider shows the exact size at any width.
Sizes that shrink as the screen widens are handled too (the bounds are swapped so clamp() stays valid). Everything runs in your browser; nothing is sent anywhere. Settings can be shared with ?min=16&max=20&minvw=320&maxvw=1280.
Related tools: CSS Grid Generator, CSS Flexbox Generator, and CSS Variables Generator.
Frequently Asked Questions
What does CSS clamp() do?
clamp(MIN, PREFERRED, MAX) returns the preferred value but never less than MIN or more than MAX. With a preferred value of 0.6667rem + 1.6667vw and bounds of 1rem and 2rem, text is 16 px on a 320 px phone, 24 px at 800 px and stops at 32 px from 1280 px upwards — one line instead of a stack of media queries.
How is the vw number worked out?
It is the slope of a straight line through your two points. For 16 px at 320 and 32 px at 1280 the slope is (32 − 16) ÷ (1280 − 320) = 0.016667 px of size per px of screen. Since 1vw is 1% of the viewport width, multiply by 100 to get 1.6667vw. The intercept is 16 − 0.016667 × 320 = 10.6667 px, which is 0.6667rem at a 16 px root.
Why mix rem and vw instead of using vw alone?
A pure vw size ignores the reader’s text-zoom setting, because vw follows the window, not the font size, which can fail WCAG 1.4.4 (text resizable to 200%). The rem part grows with the user’s default font size, so zoom still works. Pure vw also gets extreme: 1.5vw is only 4.8 px on a 320 px phone.
My root font size is 62.5% (10 px). What do I enter?
Enter 10 as the root font size. rem values are always divided by the root, so 18 px is 1.8rem at a 10 px root but 1.125rem at 16 px. Using the wrong root makes every size 1.6 times too big or too small. 18 px to 24 px over 320–1280 at root 10 gives clamp(1.8rem, 1.6rem + 0.625vw, 2.4rem).
Is clamp() supported in browsers?
Yes. clamp(), min() and max() are part of CSS Values and Units Level 4 and have worked in Chrome, Edge, Firefox and Safari since 2020 (Safari 13.1, Chrome 79, Firefox 75). For a very old browser, put a fixed font-size line first; the clamp() line overrides it where it is understood.
How do I use the CSS clamp() Generator?
Just pick your options. The answer shows up right away — there is no button to press. Change anything and it updates by itself.
Do I need to install or sign up for anything?
Not at all — it runs in the browser with nothing to install and no account. After it loads once, it even works without an internet connection.
Is my information private?
Yes. Everything happens in your browser. Nothing you type is sent to a server or saved anywhere.
Common Use Cases
Body text
16 px on phones growing to 20 px on a 1280 px laptop: clamp(1rem, 0.9167rem + 0.4167vw, 1.25rem), 18 px at 800 px.
Headings
An h1 from 32 px at 360 to 56 px at 1440 is clamp(2rem, 1.5rem + 2.2222vw, 3.5rem) — round numbers because the intercept is exactly 24 px.
Hero display type
40 px on a 375 px phone to 96 px on a 1920 px monitor fills the hero on desktop without overflowing on mobile.
Fluid spacing
The same line works for padding, margin and gap: a gap of 16 px to 48 px is 32 px at an 800 px viewport.
Design-system scales
Generate one clamp() per step of a type scale so every heading grows in proportion between the same two breakpoints.
Last updated: