Quick start
- Enter the smallest size and largest size in pixels, such as 32px and 64px for a fluid heading.
- Enter the viewport width where scaling should start and stop, such as 360px and 1280px.
- Use your site root font size, usually 16px unless your CSS changes html font-size.
Best uses
Best when you already know the mobile size, desktop size, and viewport range you want to scale across.
- 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.
What this calculator is solving
The CSS Clamp Calculator turns a minimum size, maximum size, and viewport range into a clamp() formula. This is useful for headings, spacing, and other responsive values that should grow smoothly between mobile and desktop widths.
Match each input label on the calculator to the minimum size, maximum size, minimum viewport, maximum viewport, and root font size from the same CSS design decision.
The formula in plain language
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.
For 32px to 64px across 360px to 1280px with a 16px root font size, the tool returns clamp(2rem, calc(1.217391rem + 3.478261vw), 4rem). At the middle of that viewport range, the value is about 48px, so the formula is easy to sanity-check before copying.
How to read the answer
Copy the clamp() line first, then check the slope, intercept, and middle size. If the middle size feels too large or too small, change the min/max sizes or viewport range before adding the rule to CSS.
- The main answer is the clamp() formula to copy into CSS.
- Slope explains the vw part of the formula, which is the part that grows with viewport width.
- Intercept is the rem anchor that makes the preferred value hit your chosen min and max points.
- Middle size shows the approximate value halfway through the viewport range.
Common mistakes to avoid
Most bad clamp formulas come from using a viewport range that does not match the layout, forgetting the root font size, or trusting the number before checking real text wrapping in the component.
- Do not assume fluid type fixes every responsive design issue.
- Do not use 100vw scaling when the component lives in a much narrower container unless you have tested that layout.
- Do not forget to update root font size if your project changes the browser default.
- Check text wrapping, line length, zoom behavior, and tap targets on real viewport sizes.
- Keep minimum and maximum sizes readable instead of scaling purely for visual drama.
Quick example
Say your h1 should be 32px on a 360px phone layout and 64px on a 1280px desktop layout. With a 16px root font size, enter 32, 64, 360, 1280, and 16.
The calculator returns clamp(2rem, calc(1.217391rem + 3.478261vw), 4rem). That means the browser never goes below 2rem, grows through the rem-plus-vw middle value, and stops at 4rem.
What the formula parts mean
The first value is the floor. The last value is the ceiling. The middle value is the fluid part that grows as the viewport gets wider.
- 2rem is the 32px minimum when the root font size is 16px.
- 3.478261vw is the viewport-based slope.
- 1.217391rem is the intercept that keeps the line aligned with the min and max points.
- 4rem is the 64px maximum.
Use it for spacing too
clamp() is not only for font-size. You can use the same idea for padding, margin, gaps, and other CSS values that should grow gently.
For example, 24px to 72px from 360px to 1440px with a 16px root gives clamp(1.5rem, calc(0.5rem + 4.444444vw), 4.5rem). For spacing, check small screens carefully so the formula does not crowd the content.
Browser checks before shipping
After you copy the formula, test the real component instead of only trusting the calculator. Resize the browser, zoom the page, and try the longest heading or label that might appear.
If the text wraps badly, the issue may be container width, line height, font choice, or content length. The clamp formula controls size, not the whole layout.
Useful related checks
When the formula is ready, check the surrounding design too. Fluid text still needs enough contrast, and layout media often needs a stable aspect ratio.
Research and references
These references help check the CSS clamp() function and the readability/accessibility context behind the browser checks in this guide.
Worked examples for CSS Clamp Calculator
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)
FAQ in plain language
When should I use the CSS Clamp Calculator?
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.
What is the CSS Clamp Calculator doing with my inputs?
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.
What do the main CSS Clamp Calculator inputs mean?
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.
How should I read the CSS Clamp Calculator answer?
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.
What should I double-check before trusting the answer?
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.
What does CSS clamp() do?
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.
Why does the preferred value use rem plus vw?
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.
Related tools
- Color Contrast Checker Check WCAG contrast ratio for text and background hex colors.
- Aspect Ratio Calculator Simplify aspect ratios and scale width or height while keeping proportions.
- Markdown Table Generator Create GitHub-flavored Markdown tables from headers, rows, and alignment choices.
Keep exploring
If this guide is close but not exact, these links keep you near the same kind of problem.
- Developer Tools Browse the full category for related tools that help with the same job.
- All free tools Search the complete Access Free Tools library by task, category, or tool name.
- All calculator and utility guides Find more plain-language examples, formulas, mistakes, and result explanations.
- Free calculator resources Start here when you are not sure which calculator page fits.
Privacy and copying results
Recent answers stay visible only while you work in the current browser tab. They are not sent to a server.
Use Copy answer when you want to save the inputs and result in notes, homework, a message, or a project list. Check the units, labels, and limits before copying.