CSS clamp() Calculator

What Is CSS clamp()?

clamp() is a CSS function that picks a value from between a minimum and a maximum bound based on a third, preferred value. Instead of writing several media queries to step a font-size or padding value up at different breakpoints, one clamp() declaration scales the value smoothly across every viewport width in between, then holds steady below the minimum and above the maximum. It works with any property that accepts a length, including font-size, padding, margin, width, and gap.

clamp() Syntax

property: clamp(minimum, preferred, maximum);

• minimum: the smallest value the property is allowed to take, used once the viewport shrinks below your minimum breakpoint.
• preferred: a viewport-relative value, usually built from a vw unit, that does the actual scaling between your two breakpoints.
• maximum: the largest value the property is allowed to take, used once the viewport grows past your maximum breakpoint.

How the Preferred Value Is Calculated

The preferred value in the middle of clamp() is not just any vw value: it is calculated so the result lands exactly on your minimum at your minimum viewport width, and exactly on your maximum at your maximum viewport width, with a straight line in between. Given a minimum value, a maximum value, and the two viewport widths they apply at, the slope is (maxValue - minValue) / (maxViewport - minViewport). Multiply that slope by 100 to get the vw coefficient, then subtract slope times minViewport from minValue to get a fixed offset. The result looks like clamp(1rem, 0.818rem + 0.909vw, 1.5rem), which this calculator works out for you from the four numbers above.

Using clamp() for Font Size

Fluid typography is the most common use of clamp(): a heading or body text that grows with the viewport but never gets uncomfortably small on a phone or unreasonably large on a wide desktop monitor. MDN's guidance on accessible fluid type is worth following closely here: when clamp() controls font-size, keep the maximum value at least twice the minimum, expressed in a relative unit like rem, so the text can still scale to 200% if a visitor zooms the page. This is why the calculator defaults to rem output rather than px.

Using clamp() for Padding, Gap, and Other Spacing

The same formula works just as well for spacing. A card component whose padding tightens up on mobile and opens up on desktop, or a grid whose gap grows with available space, both benefit from the same clamp() pattern used for font-size. Zoom-related accessibility concerns are less critical for spacing than for text, so px is a perfectly reasonable unit choice for padding and gap if you prefer working in whole pixels.

clamp() in Sass and SCSS

Sass and SCSS pass native CSS math functions like clamp(), min(), and max() straight through to the compiled output unchanged. There is no special mixin or plugin required: write clamp() exactly as you would in plain CSS, inside a .scss file, and it compiles as-is.

clamp() in Tailwind CSS

Tailwind doesn't ship a dedicated clamp utility, but its arbitrary value syntax handles clamp() directly. Wrap the full value in square brackets after the relevant utility prefix, and replace any spaces inside the brackets with underscores, since Tailwind class names cannot contain literal spaces:

<h1 class="text-[clamp(1rem,0.818rem_+_0.909vw,1.5rem)]">...</h1>

The same pattern applies to other utility prefixes: p-[clamp(...)] for padding, gap-[clamp(...)] for gap, or w-[clamp(...)] for width.

Browser Support

clamp() has been supported across every major browser since mid-2020 and is considered a well-established, safe-to-use feature with no fallback required.

How to Use This Calculator

1. Choose a Preview tab: Font Size, Padding, or Gap
2. Set Min Value and Max Value for the smallest and largest sizes you want
3. Set Min Viewport and Max Viewport for the screen widths those sizes apply at
4. Drag Simulated Viewport Width to preview the value at any point in between, below, or above your range
5. Pick px or rem as your output unit, and CSS or Tailwind as your output format
6. Click Copy Code to copy the result, or Copy Shareable Link to save your exact settings

Frequently Asked Questions

What does the clamp() function do in CSS?

clamp() picks a value between a minimum and maximum bound based on a third, preferred value, so a single declaration can replace several media queries written for the same property.

How is the middle preferred value in clamp() calculated?

The preferred value is usually a linear formula. Take the change in value divided by the change in viewport width to get a slope, convert that slope into a vw-based coefficient, then add a fixed offset so the value lands exactly on your minimum and maximum at the viewport widths you chose. This calculator works out that formula for you.

Should I use px or rem inside clamp()?

rem is generally the safer choice for font-size, since it respects a user's browser zoom and text-size settings. px works fine for properties like padding or gap where zoom behavior matters less.

Does clamp() work with Sass or SCSS?

Yes. Sass and SCSS pass native CSS functions like clamp() straight through to the compiled CSS unchanged, so no special syntax or plugin is needed.

How do I use clamp() in Tailwind CSS?

Wrap the clamp() value in square brackets as a Tailwind arbitrary value, replacing any spaces with underscores, for example text-[clamp(1rem,0.818rem_+_0.909vw,1.5rem)].

Does clamp() work in every browser?

Yes. clamp() has been supported across all major browsers since mid-2020, so it is safe to use in production without a fallback.