clamp(min, preferred, max)
Smoothly scales a value between a floor and a ceiling — no breakpoints needed.
Anatomy
never smaller than this preferred
scales with viewport (vw) max
never larger than this
The browser picks the preferred value, but clamps it so it never goes below min or above max.
Demo 1 — Font size
Fixed font size ignores the viewport. Clamp scales it fluidly between its min and max.
font-size: 16px; /* always 16px */ font-size: clamp(13px, 2.5vw, 22px); /* 13px → 22px */
Resize — the right text scales, the left does not
Fixed — 16px always
The quick brown fox jumps over the lazy dog. Stays the same at any width.
Fluid — clamp(13px, 2.5vw, 22px)
The quick brown fox jumps over the lazy dog. Grows and shrinks with the viewport.
Use for: headings, body text, labels — anything that should feel proportional to the screen.
Demo 2 — Spacing
Padding and gap can breathe with the viewport instead of snapping at breakpoints.
padding: 24px; /* fixed */ padding: clamp(10px, 4vw, 48px); /* fluid */
Resize — the right box's inner spacing grows and shrinks
Fixed — padding: 24px
Fluid — clamp(10px, 4vw, 48px)
Use for: section padding, card padding, gap between grid items.
Demo 3 — Container width
A common pattern: grow freely but never too narrow or too wide. Replaces min-width + max-width in one line.
width: clamp(300px, 90%, 680px);
This container uses the rule above — resize to test the limits
Use for: content containers, cards, modals.
When clamp() is not enough
Clamp scales a single value — it cannot change layout structure.
flex-direction, show or hide elements, or restructure a navigation bar.
Those need @media queries →