How this works in your browser
The generated value uses clamp with three parts: a minimum, a preferred value built from a rem base plus a viewport-width term, and a maximum. The middle term is the interesting one, and it is derived by solving for the line that passes through your two size-and-width pairs, giving the slope and intercept that make the size hit your minimum exactly at the smaller viewport and your maximum exactly at the larger. Including a rem component alongside the viewport unit rather than using viewport width alone is deliberate: a purely viewport-based size ignores the user's font size setting, which breaks zoom for anyone who depends on it.
CSS clamp() Calculator vs. typical online calculators
| Feature | CSS clamp() Calculator (in-browser) | Typical online calculators |
|---|---|---|
| Where the maths runs | In your browser, on your device | Often posted to a server to compute |
| Your inputs are stored | Never - nothing is sent or saved | Frequently logged with your session |
| Works offline once loaded | Yes | No - needs a live connection |
| Ads inside the result area | None | Common on free calculators |
| Account required | No | Often, to save or export results |
| Usage limits | None - free, unlimited use | Sometimes capped per day |
Who uses CSS clamp() Calculator
Fluid heading sizes
Scale display type smoothly instead of jumping at breakpoints.
Responsive spacing
Apply the same technique to padding and margins for consistent rhythm.
Reducing media queries
Replace several breakpoint rules with a single continuous value.
Design system tokens
Define type scales that hold up across every screen size.
How to use CSS clamp() Calculator
- 1
Open the CSS clamp() Calculator
Go to tools.slaytic.com and open the clamp() Calculator. No sign-up or account required.
- 2
Set minimum and maximum sizes
Use rem values so browser zoom keeps working for people who rely on it.
- 3
Set the viewport range
Enter the widths between which the size should scale.
- 4
Preview and copy
Drag the resize handle to check the behaviour, then copy the clamp value into your CSS.
Frequently asked questions
What does CSS clamp() do?
It sets a value that scales fluidly between a minimum and maximum based on viewport width, avoiding abrupt jumps at media query breakpoints.
Can I use this for spacing, not just font size?
Yes, the generated clamp() value works for any CSS property that accepts a length, such as padding, margin, or width.
How do I preview the effect?
Drag the resize handle on the preview box to simulate different viewport widths and see the font size change smoothly.
Will this break browser zoom for users who need it?
Not if the minimum and maximum are expressed in rem rather than px. A clamp built entirely from pixel values ignores the user's font size preference, which is a genuine accessibility failure for people who enlarge text. Using rem at both ends keeps zoom working while still scaling with the viewport.
Why use clamp instead of media queries?
Because type jumps at breakpoints and sits wrong everywhere in between. A media query gives you two fixed sizes with an abrupt switch; clamp interpolates continuously, so the size is appropriate at every width rather than only at the two you thought about.
What viewport range should I set?
Match your actual design range, commonly around 320px at the low end and 1200 to 1440 at the top. Below the minimum the size holds flat and above the maximum it holds flat, which is what stops headings becoming absurd on an ultrawide monitor.
Does clamp work everywhere?
Yes, in every current browser. It has been widely supported for years, so it needs no fallback for any browser still receiving updates.