Quick Answer

The CSS clamp() function takes a minimum, a preferred (fluid) value, and a maximum, and returns whichever of the three is in range at any given viewport width. Combined with viewport units, it replaces entire stacks of media query breakpoints with one declaration: font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem). This calculator does the linear-interpolation math for you.

CSS Clamp Calculator

Updated April 28, 2026

CSS clamp() is the cleanest way to create fluid typography that scales smoothly between viewport sizes. No more media query cascades. Define a minimum size at a minimum viewport, a maximum size at a maximum viewport, and clamp() handles the interpolation for you. This calculator computes the exact linear formula — the hardest part of using clamp() by hand — and outputs copy-paste CSS.

Most teams that adopt fluid type stop after one heading-level experiment and never push it through the rest of their type scale. That's a missed opportunity. A coherent fluid type system replaces the four-or-five breakpoints in your typography stylesheet with two numbers per scale step, and the result reads better at every width — not just the ones you tested. Utopia.fyi, by Trys Mudford and James Gilyead, is the canonical reference for the methodology, and the web.dev fluid typography article covers the underlying math. The function itself is specified in CSS Values and Units Module Level 4, and MDN's clamp() page has the full reference.

Min Viewport Width (px) Max Viewport Width (px) Min Size (px) Max Size (px) Output Unit

The quick brown fox jumps over the lazy dog

Simulate Viewport Width: 800px

Direct CSS

CSS Variables

What is clamp() and linear interpolation?

The CSS clamp() function takes three values: a minimum, a preferred (fluid) value, and a maximum. The browser evaluates the preferred value and then constrains the result to stay between the minimum and maximum bounds. When the preferred value is a formula that incorporates viewport units, the result smoothly scales between the two bounds as the browser window is resized.

The preferred value is a linear interpolation formula that transitions between the minimum and maximum sizes based on the current viewport width. The formula works out to: preferred = yIntercept + slope * 100vw, where the slope is calculated as (maxSize - minSize) / (maxVw - minVw), and the y-intercept is minSize - slope * minVw. This creates a straight line on a graph of font-size versus viewport-width, guaranteeing the size hits the minimum value at the minimum viewport and the maximum value at the maximum viewport, with proportional values at every width in between.

Before clamp() existed, developers achieved fluid typography through a combination of media queries and viewport units, or by using calc() with viewport units and hoping the result didn't get too small or too large. The clamp() function elegantly replaces all of these patterns with a single, readable line of CSS. It is one of the most impactful modern CSS functions for responsive design, eliminating entire blocks of breakpoint-based media queries in favor of a continuous, smooth scale.

How to use this tool

Set your minimum viewport width (typically 320px for mobile) and maximum viewport width (typically 1200px or 1440px for desktop). Then set the font size you want at each breakpoint — for example, 16px on mobile and 24px on desktop. Choose whether you want the output in rem or px. The calculator instantly generates the clamp() function with the correct preferred value, doing the math that is tedious and error-prone to compute by hand.

Copy the Direct CSS version to paste straight into a rule, or use the CSS Variables version if you manage your typography through custom properties. Use the viewport simulator slider to preview exactly how the text will scale across different screen widths without needing to resize your browser window. The preview text updates in real time, and the current computed size is displayed below it so you can verify the values at any simulated viewport width.

Practical examples

Responsive heading scale (h1 through h4)

A complete typographic scale can be defined with clamp(), giving each heading level its own fluid range. This approach replaces media-query-based typography systems with a few clean declarations.

h1 {
  font-size: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  line-height: 1.1;
}

h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  line-height: 1.2;
}

h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
  line-height: 1.3;
}

h4 {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
  line-height: 1.4;
}

Fluid section padding

Sections that need generous padding on desktop but compact spacing on mobile benefit greatly from clamp(). Instead of writing multiple media queries to adjust padding at each breakpoint, a single clamp() value handles the entire range smoothly.

.section {
  padding-block: clamp(2rem, 1rem + 5vw, 6rem);
  padding-inline: clamp(1rem, 0.5rem + 3vw, 4rem);
}

/* Hero section with more dramatic scaling */
.hero {
  padding-block: clamp(3rem, 1rem + 8vw, 10rem);
}

Responsive container max-width

Rather than using a fixed max-width with auto margins, you can use clamp() to create a container that grows fluidly with the viewport while staying within reasonable bounds. This eliminates the sudden "snap" that occurs when a fixed-width container hits its max and stops growing.

.container {
  width: clamp(320px, 90vw, 1200px);
  margin-inline: auto;
  padding-inline: clamp(1rem, 0.5rem + 2vw, 2rem);
}

/* Narrow content column for reading */
.prose {
  width: clamp(300px, 85vw, 680px);
  margin-inline: auto;
}

Common patterns and best practices

CSS clamp() is a powerful tool, but using it effectively requires understanding a few important principles.

Always use rem for font sizes: Using rem instead of px ensures that your fluid typography respects the user's browser font-size preferences. This is critical for accessibility — users who increase their base font size expect all text to scale accordingly.
Define a typographic scale: Rather than applying clamp() ad-hoc to individual elements, define a scale of 5-8 fluid sizes as CSS custom properties and reference them throughout your stylesheet. This creates consistency and makes global adjustments easy.
Test at extreme viewport widths: Always verify your clamp() values at very small (320px) and very large (2560px) viewports. The minimum and maximum bounds should produce readable, well-proportioned results at both extremes.
Combine with line-height: As font-size scales up, line-height often needs to decrease proportionally. Consider using a clamp() value for line-height as well, such as line-height: clamp(1.3, 1.1 + 0.5vw, 1.6).
Use for spacing, not just type: clamp() works beautifully for padding, margin, gap, and any other length property. A consistent fluid spacing system paired with fluid typography creates a layout that scales harmoniously across all screen sizes.
Avoid overly aggressive scaling: If the preferred value's viewport unit coefficient is too large, the size will change too rapidly during resize. A good rule of thumb is that the total range (max minus min) should span a reasonable viewport range (at least 500px or more).

Browser Support

Chrome / Edge — 79+ (December 2019).
Firefox — 75+ (April 2020).
Safari — 13.1+ (March 2020).
Container query units (cqi, cqw, etc.) inside clamp() — supported wherever container queries themselves are: Chrome 105+, Firefox 110+, Safari 16+ (Baseline 2024).
Spec — CSS Values and Units Module Level 4.

For legacy browser support, you can provide a fixed fallback value on the line before the clamp() declaration. Since CSS ignores properties it doesn't understand, older browsers will use the fallback while modern browsers will use the clamp() value: font-size: 1.25rem; font-size: clamp(1rem, 0.9rem + 1vw, 1.5rem);.

Common Pitfalls

Don't use px for the size values. Px values inside clamp() defeat the user's font-size preference. Always use rem for typography clamps. The accessibility hit from px is real and quietly breaks zoom for low-vision users.
Don't make every value fluid. Body copy at 16-18px, headings fluid — that's the right ratio. If your captions and badges and labels all use clamp(), you've ended up with a stylesheet that's harder to debug than the media queries you replaced.
The middle value must use a viewport unit. clamp(1rem, 1.2rem, 2rem) is just max(1rem, min(1.2rem, 2rem)) — a constant. The whole point is the linear interpolation, which requires vw, cqi, or similar.
Watch for clipping at extreme zooms. Test at 200% zoom. Some clamps that look perfect at 100% become illegibly small or jarringly large when the user's browser zoom is in play. Always set a sensible minimum.
Don't apply the same scale to mobile and desktop blindly. The same clamp() that works for a marketing site won't work for a dense data table. Different content needs different fluid ranges.

FAQ

Should I use px or rem for clamp()?

rem is generally the better choice for accessibility. When you use rem, your fluid typography respects the user's browser font-size preference. If a user sets their default font size to 20px instead of 16px, rem-based values scale proportionally while px-based values stay fixed. Most accessibility guidelines recommend rem for font sizes. This calculator converts px inputs to rem automatically when rem is selected as the output unit, dividing by a base of 16px.

Can I use clamp() for spacing, not just font-size?

Absolutely. clamp() works with any CSS property that accepts a length value. It's commonly used for margin, padding, gap, width, and even border-radius. For example, you might want your section padding to be 16px on mobile and 64px on desktop — clamp() smoothly scales that just like it does for typography. The formula and approach are identical; just change the property you apply it to.

How does clamp() handle accessibility for users who zoom?

If you use rem units in your clamp() values, the function respects both browser zoom and custom font-size settings. When a user zooms to 200%, rem-based values scale up proportionally because the root font size increases with the zoom level. The vw component also adjusts because the effective viewport width shrinks during zoom. Always test your clamp() values at 200% zoom to verify that text remains readable and that minimum sizes are large enough for comfortable reading at all zoom levels.

Can I use clamp() inside calc()?

Yes, clamp() can be nested inside calc() and vice versa. For example, calc(clamp(1rem, 2vw, 2rem) + 0.5rem) is valid CSS and the browser will evaluate the clamp first, then add the fixed offset. This is useful when you need to add a constant amount to a fluid value, such as adding space for a fixed-size icon alongside fluid text. You can also use calc() inside any of clamp()'s three arguments.

What's the fallback for browsers that don't support clamp()?

All modern browsers support clamp(), so fallbacks are only needed for very old browsers. The standard pattern is to declare a fixed fallback value immediately before the clamp() line. For example: font-size: 1.125rem; font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);. Browsers that don't understand clamp() will ignore the second declaration and use the fixed value. Browsers that do support it will apply the clamp() value, overriding the fallback.

Can I use clamp() with container query units (cqi)?

Yes, you can replace vw with cqi (container query inline) units inside clamp() to make fluid values respond to the width of a containing element rather than the viewport. For example, font-size: clamp(0.875rem, 0.5rem + 2cqi, 1.5rem) scales the font size based on the container's inline dimension. This requires the container to have container-type: inline-size set. Container query units are supported in Chrome 105+, Firefox 110+, Safari 16+, and Edge 105+.

Related guides

Fluid Typography Guide — the math, the methodology, and the type-scale pattern
Container Queries Guide — pairs naturally with cqi units inside clamp()
All CSS Guides