Use this free CSS clamp calculator to create a copy-ready responsive clamp() formula from minimum size, maximum size, viewport range, and root font size.
clamp(1.125rem, calc(0.782609rem + 1.521739vw), 2rem)
18px to 32px from 360px-1280px viewport
Clamp is useful for fluid type and spacing, but still test real text wrapping and tap targets on small screens.
Create fluid heading sizes that grow between mobile and desktop widths.
Generate responsive spacing values without writing several media queries.
Convert a design-system min and max size into copy-ready CSS.
Compare the middle size before placing the formula in a stylesheet.
clamp(2rem, calc(1.217391rem + 3.478261vw), 4rem)
clamp(1rem, calc(0.886364rem + 0.484848vw), 1.25rem)
clamp(1.5rem, calc(0.5rem + 4.444444vw), 4.5rem)
Need a slower walkthrough, a related calculator, or the full library? These links keep you close to the task you started.
Plain-language answers about when to use the tool, what it does with your inputs, what to double-check, and how privacy works.
Use it when your task matches one of these common needs: Create fluid heading sizes that grow between mobile and desktop widths. Generate responsive spacing values without writing several media queries. It works best when you already know the text, code, URL, mode, format, or technical setting the page asks for.
In plain language: Slope = (maximum size - minimum size) / (maximum viewport - minimum viewport) * 100. Intercept px = minimum size - slope * minimum viewport / 100. The calculator converts minimum size, intercept, and maximum size to rem with the root font size, then formats clamp(minRem, calc(interceptRem + slopevw), maxRem). The examples on the page are there so you can compare your inputs with a filled-out example before copying the answer.
Minimum size: The smallest value you want the CSS property to use, usually the mobile size in pixels. Maximum size: The largest value you want the CSS property to use, usually the desktop size in pixels. Minimum viewport: The viewport width where the value should stop shrinking. Maximum viewport: The viewport width where the value should stop growing. Root font size: The px value used to convert px values into rem. The browser default is usually 16px. Middle size: A quick midpoint check so you can see whether the scale feels reasonable before copying the CSS.
Read the output next to your original input. If the tool changes format, units, encoding, spacing, or capitalization, compare a small sample before copying the whole result into another app.
Clamp formulas control numeric scaling only. Real layouts still need browser checks for text wrapping, readability, zoom, root font-size changes, tap targets, and container width. Also check the selected mode, input format, encoding, and whether the text includes private keys, passwords, or sensitive data.
CSS clamp() keeps a value between a minimum and a maximum. The middle value can be fluid, so a heading, spacing token, or layout value can grow with the viewport without extra media queries.
The vw part creates the viewport-based growth. The rem intercept anchors the line so the formula lands on your chosen minimum size at the minimum viewport and your chosen maximum size at the maximum viewport.
This calculator asks for pixel inputs because design specs often use pixels, then returns rem endpoints and a rem-plus-vw preferred value. That keeps the formula friendlier to root font-size changes while still matching your design numbers.
Use the width range where you actually want the value to scale. A common pattern is a mobile width such as 360px or 375px and a desktop width such as 1200px, 1280px, or 1440px.
Yes. clamp() can work for font-size, margin, padding, gaps, widths, and other numeric CSS values. For spacing, still check small screens so the fluid value does not crowd content.
clamp() only controls the numeric size. Long words, narrow containers, line height, font choice, and content length can still create awkward wrapping, so check the real component in a browser.
No. This formula scales with viewport width because it uses vw. Container queries respond to a component container. Use browser testing or container-query CSS when the component width matters more than the full viewport.
No. The tool runs in your browser tab. Your recent answers stay only on the page while you use it, and they are not sent to a server.