📐 CSS clamp() Generator
By ToolNimba Web Dev Team · Updated 2026-06-19
Font size at the smallest viewport.
Font size at the largest viewport.
Where scaling starts (e.g. small phone).
Where scaling stops (e.g. desktop).
Used to convert px into rem. Browsers default to 16px.
The quick brown fox jumps over the lazy dog.
Resize your browser window to watch the text scale between the limits.
Enter your sizes and viewport widths. The clamp() value updates instantly.
This CSS clamp() generator builds a single fluid font-size value that scales smoothly between a minimum and a maximum as the viewport widens. Enter the smallest size, the largest size, and the viewport widths where each should apply. You get a ready-to-copy clamp() value expressed in rem and vw, plus a live preview so you can see the text grow as your window resizes.
What is the CSS Clamp Generator?
CSS clamp() takes three arguments: a minimum, a preferred value, and a maximum, written as clamp(min, preferred, max). The browser uses the preferred value, but never lets it drop below the minimum or rise above the maximum. For fluid typography the preferred value is a formula that mixes a fixed part (rem) with a viewport-relative part (vw), so the text grows in step with the screen instead of jumping at fixed breakpoints.
The generator works out that middle term by drawing a straight line between your two points. If you want 16px at a 320px viewport and 24px at a 1280px viewport, it finds the slope of that line, slope = (24 - 16) / (1280 - 320) = 0.0083333 px per px of width. It then converts the line into a rem constant plus a vw coefficient. The vw part is the slope times 100 (because 1vw equals 1% of the viewport), and the rem part is the leftover constant divided by your root font size. The result is something like clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem).
Using rem for the bounds and the constant matters for accessibility. A value built only from vw ignores the user reader who has bumped up their browser font size, while rem respects it. Mixing rem with vw, as this tool does, keeps the type fluid across viewport sizes while still honouring the root font size, which is the recommended modern approach for headings, body copy, spacing, and even widths.
When to use it
- Creating fluid headings that scale smoothly from mobile to desktop without a stack of media queries.
- Setting responsive body text that stays readable on a small phone yet fills out on a large monitor.
- Building fluid spacing, gaps, or container widths using the same min, preferred, max pattern.
- Replacing several breakpoint-based font-size rules with one clamp() declaration to simplify a stylesheet.
How to use the CSS Clamp Generator
- Enter the minimum font size in pixels, the size you want at the narrowest screen.
- Enter the maximum font size in pixels, the size you want at the widest screen.
- Enter the minimum and maximum viewport widths in pixels (for example 320 and 1280).
- Adjust the root font size if your project does not use the 16px default.
- Copy the generated clamp() value and paste it into your CSS, then resize the preview to check it.
Formula & method
Worked examples
Fluid body text: 16px at a 320px viewport up to 24px at a 1280px viewport, root font size 16px.
- slope = (24 - 16) / (1280 - 320) = 8 / 960 = 0.0083333 px per px
- vw part = slope x 100 = 0.83333vw
- constant px = minSize - slope x minVw = 16 - 0.0083333 x 320 = 13.3333px
- constant rem = 13.3333 / 16 = 0.8333rem
- min bound = 16 / 16 = 1rem, max bound = 24 / 16 = 1.5rem
- Check at 320px: 0.8333rem x 16 + 0.8333vw x 320 / 100 = 13.333 + 2.667 = 16px
- Check at 1280px: 13.333 + 0.8333 x 1280 / 100 = 13.333 + 10.667 = 24px
Result: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)
A fluid hero heading: 32px at 360px wide up to 64px at 1440px wide, root font size 16px.
- slope = (64 - 32) / (1440 - 360) = 32 / 1080 = 0.0296296 px per px
- vw part = slope x 100 = 2.963vw
- constant px = 32 - 0.0296296 x 360 = 32 - 10.6667 = 21.3333px
- constant rem = 21.3333 / 16 = 1.3333rem
- min bound = 32 / 16 = 2rem, max bound = 64 / 16 = 4rem
- Check at 360px: 1.3333 x 16 + 2.963 x 360 / 100 = 21.333 + 10.667 = 32px
Result: clamp(2rem, 1.3333rem + 2.963vw, 4rem)
Common fluid type pairs generated at a 16px root, viewports 320px to 1280px
| Role | Min to max (px) | clamp() value |
|---|---|---|
| Small text | 14 to 16 | clamp(0.875rem, 0.8333rem + 0.2083vw, 1rem) |
| Body text | 16 to 20 | clamp(1rem, 0.9167rem + 0.4167vw, 1.25rem) |
| Subheading | 20 to 28 | clamp(1.25rem, 1.0833rem + 0.8333vw, 1.75rem) |
| Heading | 24 to 40 | clamp(1.5rem, 1.1667rem + 1.6667vw, 2.5rem) |
| Hero | 32 to 64 | clamp(2rem, 1.3333rem + 3.3333vw, 4rem) |
What each clamp() argument controls
| Argument | Role |
|---|---|
| Minimum (rem) | The floor: the value never goes below this, even on tiny screens. |
| Preferred (rem + vw) | The fluid value the browser prefers between the bounds. |
| Maximum (rem) | The ceiling: the value never grows above this on large screens. |
Common mistakes to avoid
- Using only vw with no rem part. A preferred value built purely from vw ignores the user reader who has increased their browser font size, which hurts accessibility. Mixing a rem constant with vw, as this tool does, keeps the type fluid while still respecting the root font size.
- Swapping the minimum and maximum. In clamp(min, preferred, max) the first number must be the smaller bound and the third the larger one. If you reverse them the value can lock to the wrong limit. This generator sorts the bounds for you, but double-check when writing clamp() by hand.
- Setting the viewport range too narrow. If the minimum and maximum viewports are very close, the slope becomes steep and the text grows abruptly over a tiny range. Use a sensible span such as a small phone width up to a common desktop width so the scaling feels smooth.
- Forgetting clamp() needs all three arguments. clamp() requires exactly a minimum, a preferred, and a maximum value, separated by commas. Leaving one out is invalid CSS and the declaration is ignored, so the element falls back to its inherited size.
Glossary
- clamp()
- A CSS function clamp(min, preferred, max) that returns the preferred value but never below the minimum or above the maximum.
- Fluid typography
- Type that scales smoothly with the viewport width instead of jumping between fixed sizes at breakpoints.
- vw
- A viewport-width unit where 1vw equals 1% of the viewport width, so 100vw is the full width.
- rem
- A unit relative to the root font size, so 1rem equals the size set on the html element (16px by default).
- Slope
- The rate of change of size per pixel of viewport width, used to build the fluid preferred value.
- Viewport
- The visible area of the browser window, whose width drives responsive and fluid values.
Frequently asked questions
What does CSS clamp() do?
clamp() takes three values, written clamp(min, preferred, max). The browser uses the preferred value but clamps it so it never drops below the minimum or rises above the maximum. For fluid typography the preferred value mixes rem and vw so the text scales with the screen between the two limits.
Why does the generator mix rem and vw?
The vw part makes the value scale with the viewport, while the rem constant and the rem bounds respect the user root font size. A value built only from vw would ignore a reader who has zoomed or enlarged their browser text, so mixing the two keeps the result both fluid and accessible.
Can I use clamp() for things other than font size?
Yes. clamp() works for any length value, so you can use the same min, preferred, max pattern for margins, padding, gaps, widths, and even line-height. This tool focuses on font size, but you can paste the generated value into any length property.
What viewport widths should I choose?
A common choice is a small phone width such as 320px for the minimum and a typical desktop width such as 1280px or 1440px for the maximum. The text holds at the minimum size below the small viewport and at the maximum size above the large one.
Do I still need media queries with clamp()?
Often you need far fewer. A single clamp() can replace several breakpoint-based font-size rules because the value scales continuously. You may still use media queries for layout changes, but type and spacing can frequently be handled by clamp() alone.
Is clamp() supported in browsers?
Yes. clamp() is supported in all current major browsers, including Chrome, Edge, Firefox, and Safari. For very old browsers you can provide a plain fixed-size fallback declaration before the clamp() rule, and capable browsers will use the clamp() value.