What does CSS clamp() do?

It returns a value between a minimum and a maximum. In between, it uses a preferred value, usually a mix of rem and vw, so the size grows with the screen.

Should I use px or rem output?

Use rem. It respects the font size a reader sets in their browser, while px does not.

Why does my text not respond to browser zoom?

The preferred value probably uses vw only. Add a rem part, as this calculator does, and zoom works again.

What is the formula behind the calculator?

The slope is the size difference divided by the viewport difference. The preferred value is the intercept plus the slope times 100vw, which is exactly what clamp() needs.

Can I use the output for padding and margin?

Yes. Pick the property in the dropdown and the same fluid value is generated for padding, margin, gap or width.

CSS Clamp Calculator: Generate Fluid clamp() Values Free

Set a minimum size, a maximum size, and the screen widths between them. Copy the clamp() value that scales smoothly in between.

How the calculator works

The tool draws a straight line between two points: your minimum size at the minimum viewport width, and your maximum size at the maximum viewport width. clamp() keeps the value on that line and stops it at either end, so nothing grows past your maximum or shrinks below your minimum.

clamp(min, intercept + slope * 100vw, max)

What to use it for

Use fluid values for font sizes, padding, margins, gap and section spacing: anywhere you would otherwise write a media query just to change one number. One declaration replaces two or three breakpoints.

Keep it accessible

Output in rem, not px. A value built only from vw ignores browser zoom, so readers who enlarge text see no change. The rem part of the preferred value keeps zoom working.

How to use the calculator

Enter the smallest and largest size you want, in pixels.
Enter the narrowest and widest screen widths where the size should change. 320px and 1280px are a good start.
Choose rem or px output and the CSS property.
Copy the generated line into your stylesheet.

A worked example

For a heading that should be 24px on a 320px screen and 48px on a 1280px screen, the slope is 24 / 960 = 0.025, which is 2.5vw. The intercept is 24 - 0.025 x 320 = 16px, or 1rem. The result is clamp(1.5rem, 1rem + 2.5vw, 3rem).

Learn more

Read the CSS clamp() guide for syntax and common mistakes, or the responsive font size guide to compare methods.

CSS clamp() Calculator