CSS clamp() Function

CSS clamp() Function

The CSS clamp() function constrains a preferred value between a minimum and maximum value. It is useful for creating fluid dimensions, spacing, and typography that can respond to available space without becoming too small or too large.

The function accepts exactly three arguments: a minimum value, a preferred value, and a maximum value. The browser uses the preferred value while keeping the result within the specified limits.

clamp() Syntax

The clamp() function accepts three comma-separated values.

property: clamp(minimum, preferred, maximum);

For example, a font size can have a minimum of 1rem, a preferred viewport-relative value of 3vw, and a maximum of 2rem.

.heading {
  font-size: clamp(1rem, 3vw, 2rem);
}

The browser allows the preferred value to change while preventing the resulting font size from becoming smaller than 1rem or larger than 2rem.

How clamp() Works

The clamp() function can be understood as applying a lower and upper boundary to a preferred value.

.box {
  width: clamp(300px, 60%, 800px);
}

If 60% resolves to a value between 300px and 800px, that percentage-based value is used.

If the preferred value would be less than 300px, the result is constrained by the minimum. If it would be greater than 800px, the result is constrained by the maximum.

Minimum Value

The first argument establishes the minimum boundary.

.box {
  width: clamp(300px, 60%, 800px);
}

In this example, the calculated result will not normally be less than 300px.

Minimum values are useful for preventing fluid dimensions or spacing from becoming impractically small as the available space changes.

As with other minimum sizing techniques, make sure the chosen minimum does not create unwanted overflow on narrow screens.

Preferred Value

The second argument is the preferred value. This is the value that commonly provides the fluid or responsive behavior.

.heading {
  font-size: clamp(1.25rem, 4vw, 3rem);
}

Here, 4vw changes as the viewport width changes. While it remains between the minimum and maximum boundaries, it determines the resulting font size.

The preferred argument does not have to use viewport units. It can use any compatible value or mathematical expression appropriate for the property.

Maximum Value

The third argument establishes the maximum boundary.

.box {
  width: clamp(300px, 60%, 800px);
}

When the preferred value grows beyond the upper boundary, the maximum constrains the result.

This is useful for fluid values that should increase with available space but stop growing once they reach a practical limit.

Fluid Typography

One of the most common uses of clamp() is fluid typography. A viewport-relative preferred value can change continuously between minimum and maximum font sizes.

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

On narrower viewports, the font size cannot fall below 2rem. Between the boundaries, 5vw controls the size. On wider viewports, the font size stops growing at 4rem.

A more controlled fluid formula can combine a relative font size with a viewport component.

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

This type of preferred expression can provide a base size while still allowing the value to respond to viewport width.

Responsive Sizing

The clamp() function can also control widths, heights, and other dimensions.

.card {
  width: clamp(280px, 70%, 700px);
}

The card has a lower width boundary of 280px, a preferred width of 70%, and an upper boundary of 700px.

This can reduce the number of media queries needed when the design requires a value to scale continuously rather than change at specific breakpoints.

Responsive Spacing

Margins, padding, and gaps can use clamp() to create spacing that grows within controlled limits.

.section {
  padding-block: clamp(30px, 6vw, 80px);
}

The vertical padding can respond to viewport width but will remain between 30px and 80px.

The same approach can be used for gaps between layout items.

.grid {
  gap: clamp(16px, 3vw, 40px);
}

clamp() with Custom Properties

Custom properties can supply any of the three arguments to clamp().

:root {
  --font-min: 1.25rem;
  --font-max: 2.5rem;
}
.heading {
  font-size: clamp(var(--font-min), 4vw, var(--font-max));
}

The minimum and maximum values can now be changed from the custom property declarations without rewriting the complete function.

The entire expression can also be stored in a custom property.

:root {
  --heading-size: clamp(1.25rem, 4vw, 2.5rem);
}
.heading {
  font-size: var(--heading-size);
}

This is useful when the same fluid value is reused throughout a design.

clamp() with Calculations

The arguments to clamp() can contain mathematical expressions.

.content {
  width: clamp(300px, 100% - 40px, 1000px);
}

The preferred value represents the available width minus 40px, while the minimum and maximum values constrain the result.

An explicit calc() function can also be used when it makes the calculation clearer.

.content {
  width: clamp(300px, calc(100% - 40px), 1000px);
}

CSS math functions can therefore be combined to express more detailed sizing relationships.

clamp(), min(), and max()

The min(), max(), and clamp() functions all compare values, but they solve different types of constraints.

Use min() when you need an upper-style constraint, max() when you need a lower-style constraint, and clamp() when the value needs both lower and upper boundaries.

clamp() Practices

CSS clamp() Example

The following example uses clamp() to create a heading that changes size with the viewport while remaining between 24px and 48px.

.heading {
  font-size: clamp(24px, 6vw, 48px);
}

Drag the divider between the code and result panes to change the preview width. The preferred 6vw value changes with the viewport, but the font size will not become smaller than 24px or larger than 48px.