CSS clamp(): A Practical Guide

Syntax

clamp() takes three values: a minimum, a preferred value, and a maximum. It returns the preferred value unless that falls below the minimum or above the maximum.

font-size: clamp(1rem, 0.9583rem + 0.2083vw, 1.125rem);

It is shorthand for max(min, min(preferred, max)).

Examples

padding: clamp(1rem, 4vw, 3rem);
width: clamp(20rem, 90%, 60rem);
gap: clamp(0.75rem, 2vw, 1.5rem);

Common mistakes

Using only vw as the preferred value breaks browser zoom. Putting the minimum above the maximum makes the minimum always win. Wrapping the arithmetic in calc() is unnecessary: clamp() accepts expressions like 1rem + 2vw directly.

Browser support

clamp() works in all current major browsers.

Fluid layout examples

h1 { font-size: clamp(2rem, 1.3333rem + 3.3333vw, 4rem); }
.container { padding-inline: clamp(1rem, 5vw, 4rem); }
section { margin-block: clamp(2rem, 6vw, 5rem); }

clamp() compared with min() and max()

min() sets an upper limit and max() sets a lower limit. clamp() does both in one call, so it is the right choice when you need a floor and a ceiling.

Next steps

Generate exact values with the clamp calculator, convert pixel sizes with the rem converter, or build a full type scale with the fluid typography calculator.