CSS clamp() Calculator
Generate a responsive CSS clamp() value from a minimum and maximum size. The preferred term uses a rem base plus a vw slope, so text and spacing scale fluidly between your viewport bounds. Runs entirely in your browser.
About the CSS clamp() Calculator
The CSS clamp() Calculator builds a single fluid value that scales between a minimum and maximum size as the viewport changes width. You set the smallest size, the largest size, the viewport range over which it should scale, and the root font-size. The tool returns a clamp() string in rem where the preferred term is a rem base plus a vw slope, so type and spacing grow smoothly without media queries. Everything runs in your browser; no values are sent to a server.
How it works
- Enter the minimum size and maximum size in pixels, then the minimum and maximum viewport widths the value should scale across.
- Set the root font-size used to convert pixels to rem. The default is 16.
- Read the generated clamp() output. It updates live as you type, and the cards below show the size at the low, middle, and high viewport plus the computed slope.
- Click Copy to put the clamp() value on your clipboard, then paste it into any CSS property such as font-size, padding, or gap.
Features
- Live output: the clamp() value and the breakdown recompute on every keystroke.
- rem-based result with a vw slope, so the value respects the user's root font-size.
- Shows the computed slope and intercept along with sample sizes at three viewport widths.
- Adjustable root font-size for projects that do not use a 16px base.
- One-click copy of the full clamp() string.
Frequently asked questions
How is the preferred value calculated?
The slope is (maxSize - minSize) divided by (maxViewport - minViewport). The intercept is minSize minus slope times minViewport. The preferred term is the intercept written in rem plus the slope written as a vw value, which is slope times 100. The tool wraps this in clamp(minRem, preferred, maxRem).
Why is the output in rem instead of px?
Using rem for the min, max, and intercept ties the value to the root font-size, so it respects a user's browser zoom and accessibility settings. The vw part stays as a viewport unit because it is what makes the value fluid.
What viewport range should I use?
A common choice is 320px for the minimum and 1280px or 1440px for the maximum. Below the minimum the value stays at the min; above the maximum it stays at the max. Pick a range that matches the screens you design for.
Where can I use a clamp() value?
Any length property accepts it: font-size, line-height, padding, margin, gap, width, and more. It is most often used for fluid type and spacing that should respond to viewport width without breakpoints.
Does it send my numbers anywhere?
No. The calculation happens entirely in your browser with plain JavaScript. Nothing is uploaded, logged, or stored.