How to use CSS clamp()

clamp() is one of the most useful additions to CSS in the last decade. It lets you set a value that fluidly scales between a minimum and maximum, based on viewport width or any other context. It replaces entire stacks of media queries with a single line. This guide covers the clamp() syntax, the math behind fluid typography, how to derive preferred-value expressions, when to reach for clamp() vs media queries, browser support, and common pitfalls.

Syntax

clamp(MIN, PREFERRED, MAX)

Returns the preferred value, bounded by min and max.

Simple example:

font-size: clamp(1rem, 2.5vw, 1.5rem);

At viewport width 400px → 2.5vw = 10px → clamped up to 16px (1rem).

At 800px → 20px → within range → returns 20px.

At 1200px → 30px → clamped down to 24px (1.5rem).

Fluid typography — the killer use case

The old way: media-query breakpoints.

h1 { font-size: 2rem; }
@media (min-width: 640px) { h1 { font-size: 2.5rem; }}
@media (min-width: 1024px) { h1 { font-size: 3rem; }}

The clamp() way:

h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }

Size grows smoothly with viewport. No jarring jumps at breakpoints. Less CSS.

The preferred-value formula

The middle argument has to do some math: combine a viewport unit with a fixed offset so the value hits your min at a specific small viewport and your max at a specific large viewport.

Want font-size 16px at 320px viewport, 32px at 1280px viewport?

Rise: 32 − 16 = 16px over 1280 − 320 = 960px = 1.667% per px of viewport = 1.667vw (since 1vw = 1% of viewport).

Offset: at viewport 320px, 1.667vw = 5.33px. You want 16px, so add 16 − 5.33 = 10.67px ≈ 0.667rem.

Expression: clamp(1rem, 0.667rem + 1.667vw, 2rem).

The 0.667rem + 1.667vw reaches exactly 1rem (16px) at 320px and 2rem (32px) at 1280px. Beyond that, the clamp kicks in.

Beyond typography

Spacing:

padding: clamp(1rem, 5vw, 3rem);

Hero sections get more breathing room on desktop without crushing mobile.

Grid gap:

gap: clamp(0.5rem, 2vw, 2rem);

Border radius:

border-radius: clamp(4px, 1vw, 16px);

Section max-width:

max-width: clamp(400px, 80vw, 1200px);

Anywhere a length value varies with context, clamp() can replace multiple declarations.

Using other units in clamp

clamp() works with any length units — px, rem, em, %, vw, vh, ch, ex, and container query units (cqi, cqw). Mix freely:

width: clamp(300px, 50%, 800px);
font-size: clamp(1rem, 5cqi, 2rem);  /* container queries */

Container query units are especially powerful paired with @container — let components fluidly scale within their own container, not the viewport.

clamp() vs media queries

Use clamp() when a value scales smoothly with viewport size — typography, spacing, gap, proportional sizing.

Use media queries when layout changes structure — column count, hidden/shown elements, flex direction, different components entirely.

They coexist. A component with font-size: clamp(...) inside a media-query-driven grid is completely normal.

Accessibility — minimum matters

Users often set a minimum browser font size for readability.clamp() with a small vw-only preferred value can collapse below the user’s minimum on tiny viewports.

Rule: use a rem-based component in the preferred value, not pure vw. That way user zoom and base font-size changes continue to scale:

/* Good */
font-size: clamp(1rem, 0.8rem + 1.5vw, 1.5rem);

/* Bad — ignores user's base font */
font-size: clamp(16px, 4vw, 24px);

Generator tools exist for a reason

The preferred-value math is error-prone. Plug your target sizes and breakpoints into a generator and get the expression. Plenty of free ones, including our own CSS clamp generator.

Bookmark one — you’ll use it every time you build a fluid design system.

Browser support

clamp() is universal since 2020. Chrome 79+, Firefox 75+, Safari 13.1+. Not a concern in 2026.

Container query units (cqi/cqw): Chrome 105+, Firefox 110+, Safari 16+. Safe for most projects now.

Debugging clamp

Inspect the element in devtools. Chrome and Firefox show the computed value at current viewport and highlight the clamp expression. Adjust the window and watch it update.

Pitfall: if your preferred value is stuck at min or max across all viewports, either your breakpoints don’t hit or your math is off. A generator catches this.

Common mistakes

Using only vw in preferred. Ignores user zoom and base font changes. Use rem + vw.

Setting min too low. Text collapses to unreadable on mobile. Min should be your intended mobile value, not smaller.

Setting max too high. Text or spacing balloons on wide monitors. Max should be your intended desktop value.

Using clamp for things that should be fixed.Button padding usually doesn’t need fluid scaling.

Combining with px-based media queries inconsistently.Pick rem-based breakpoints and stick with them; clamp() plays nicer with rems.

Doing the math by hand repeatedly. Use a generator. You’ll save hours.

Run the numbers

Generate a clamp() expression from min/max sizes and viewport range with the CSS clamp generator. Pair with the CSS minifier to ship the final stylesheet, and the CSS gradient generator to pair fluid type with visual polish.