← Back to functions

CSS Function

clamp()

Math

Clamps a value between a minimum, preferred, and maximum.

Syntax

clamp(min, preferred, max)

Example

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

Common use cases

  • Fluid typography that scales between sizes
  • Responsive spacing with limits
  • Adaptive grid gaps

Practical developer insight

clamp() is the holy grail for responsive design without media queries — use it for font-size, padding, margins, and container widths.

Related