Mastering CSS clamp(): Simplify Responsive Design with Linear Scaling

This article is translated from Ahmad Shadeed's Defensive CSS; the original can be read at the end of the article.

In early web development, layouts often relied on tables and hacky techniques. Modern CSS now allows developers to write code that works across all major browsers and simplifies responsive layouts while reducing redundant code.

Using clamp for responsive design

To adjust an element's font size, two separate font-size rules were previously used with a media query:

.element {
  font-size: 1rem;
}
@media screen and (min-width: 768px) {
  .element {
    font-size: 1.25rem;
  }
}

Without media queries, such changes aren't possible. For numeric properties like spacing or font size, a linear interpolation between two points is often desired. The CSS clamp function enables values to vary between a minimum and maximum.

clamp function

The clamp function takes three comma‑separated expressions: a minimum, a preferred value, and a maximum.

.element {
  property: clamp(<min>, <preferred>, <max>);
}

If the preferred value is lower than the minimum, the minimum is used; if it falls between the minimum and maximum, the preferred value is used; if it exceeds the maximum, the maximum is used. Thus, the preferred value is constrained between lower and upper bounds, equivalent to max(min, min(preferred, max)).

At first glance, clamp may seem limited, especially with static examples like:

.element {
  font-size: clamp(12px, 16px, 20px);
}

Here the result is a static 16px. The true power appears when the preferred value is dynamic, such as using viewport units ( vw), where 1vw equals 1% of the viewport width. As the viewport changes, the browser recalculates the value, enabling linear scaling.

The diagram below illustrates how clamp works:

The leftmost line represents the minimum, the rightmost line the maximum, and the preferred value linearly interpolates between them.

When the preferred value uses vw, clamp ensures it stays within the defined bounds while the viewport unit allows smooth growth. Example:

.element {
  font-size: clamp(1rem, 0.45vw + 0.89rem, 1.25rem);
}

This means the element's font size is at least 1rem, never exceeds 1.25rem, and prefers 0.45vw + 0.89rem.

Choosing appropriate values often requires mathematical calculations or tooling to generate the correct clamp expression.

Although this example focuses on font size, clamp can be applied to any numeric CSS property, such as padding, margin, or border width. Try using clamp in your projects to see if it fits your design needs.

However, if designers lack a clear understanding of this behavior, clamp may not be appropriate, and traditional media queries remain necessary for discrete state changes. In summary, clamp is a powerful tool for fluid layouts but does not fully replace media queries.

This article is the fourth part of a series on writing better CSS code.