CSS Clamp Calculator
Enter the smallest and largest sizes and the screen widths where they apply, and get a clamp() value to copy.
Dieser Inhalt ist auf Englisch.
Fluid heading sample
Calculated size at common screen widths
Durchgerechnete Beispiele
Heading that grows with the screen
Minimum 16px at a 320px screen, maximum 24px at a 1200px screen
font-size: clamp(16px, 0.9091vw + 13.0909px, 24px);
Between the two screen widths the size grows in a straight line, and stays fixed outside them; rounding to four decimal places may differ slightly.
Fixed size below a breakpoint
Minimum 16px at 320px, maximum 16px at 1200px
font-size: clamp(16px, 16px, 16px);
If the minimum and maximum match, the size never changes, which is useful for values that must stay constant.
Über CSS Clamp Calculator
The CSS clamp() function lets a value grow smoothly with the width of the screen, but stop at a sensible minimum and maximum. It takes three parts: the smallest value, a preferred value that changes with the viewport, and the largest value. Used for font sizes, it keeps headings and body text comfortable on a small phone and large enough on a wide monitor, without the sudden jumps that media query breakpoints create. This calculator works out the preferred value for you from the sizes and screen widths you enter.
Enter the size you want at the smallest screen width and the size you want at the largest, then choose whether the value applies to font size, padding or margin. The result is a complete declaration you can copy. The table shows the calculated size at common screen widths, so you can check the behaviour before you use it. Sizes are converted to rem using a 16px root size, which keeps the text responsive to the browser settings people choose.
So verwenden Sie CSS Clamp Calculator
- Choose the CSS property you want to scale, such as font-size.
- Enter the minimum and maximum sizes in pixels.
- Enter the screen width where the minimum applies and the width where the maximum applies.
- Copy the declaration, then check the table and the sample text to confirm the sizes.
Typische Einsatzzwecke
- Scaling a page heading from a small phone to a large desktop
- Making section padding roomy on wide screens and tighter on phones
- Setting a body text size that grows gently with the screen
- Building a fluid type scale for a design system
Häufige Fragen
What does clamp() actually do?
The clamp() function returns a value between a minimum and a maximum. The middle argument is the preferred value, and clamp uses it as long as it sits between the two limits. If the preferred value falls below the minimum, the minimum is used, and if it rises above the maximum, the maximum is used. This keeps text and spacing inside a range that you choose.
How is the preferred value calculated?
The calculator draws a straight line between your minimum size at the smallest screen width and your maximum size at the largest. It then writes that line as a fixed rem amount plus a viewport width amount, which is the standard way to express a fluid value in CSS. The slope and starting point are rounded to four decimal places, so the table gives a close, not exact, size at each width.
Why does the calculator use rem instead of pixels?
Rem units follow the root font size in the browser. If a visitor has chosen larger text in their settings, rem values grow with it, which helps people who need bigger text. The calculator converts your pixel sizes using a root size of 16px, so a 16px minimum becomes 1rem. Using rem keeps the fluid scale respectful of those settings.
Which screen widths should I use?
A common choice is 320px for the smallest width and 1200px for the largest, because 320px covers most small phones and 1200px covers a typical desktop layout. Choose widths that match your own layout breakpoints if you have them. Check the result on real devices, because screen widths in browsers vary with zoom levels and scroll bars.
Can I use clamp() for padding and margins as well?
Yes. The same formula works for any length property, so padding, margin, gap and width can all use clamp(). Spacing that grows with the screen keeps sections balanced, with more room around content on large displays. Use the padding or margin option to write the declaration for that property, then check the preview to see the spacing change as you resize the window.