CSS clamp() Function

CSS clamp() Function

The CSS clamp() function limits a value to a specified range using a minimum, preferred, and maximum value. It is commonly used to create responsive font sizes, element widths, and spacing that adjust automatically without becoming too small or too large.

Syntax

clamp(minimum, preferred, maximum)

The clamp() function accepts three comma-separated arguments. Each argument can be a compatible CSS value or mathematical expression.

For example:

.example {
  width: clamp(200px, 50%, 600px);
}

The preferred width is 50% of the containing block, but the calculated value cannot be less than 200 pixels or greater than 600 pixels.

Additional examples:

font-size: clamp(1rem, 2vw, 2rem);
width: clamp(250px, 60%, 800px);
padding: clamp(10px, 2vw, 30px);
margin-top: clamp(1rem, 3vw, 3rem);
gap: clamp(8px, 2vw, 24px);

The minimum and maximum arguments may also use none to indicate an unrestricted boundary:

width: clamp(200px, 50%, none);
width: clamp(none, 50%, 600px);

The none syntax is newer than basic clamp() support and should be checked for browser compatibility.

Parameters

The clamp() function uses three parameters in a fixed order.

For example:

width: clamp(200px, 350px, 500px);

The preferred value of 350 pixels falls within the range, so the result is 350px.

If the preferred value is below the minimum:

width: clamp(200px, 100px, 500px);

The result is 200px.

If the preferred value exceeds the maximum:

width: clamp(200px, 700px, 500px);

The result is 500px.

All three arguments are required, although none can replace either boundary where supported.

How It Works

The browser evaluates the preferred value and compares it with the minimum and maximum boundaries.

The function selects the preferred value when it is within the range. Otherwise, it selects the appropriate boundary.

For example:

.box {
  width: clamp(200px, 50vw, 600px);
}

The preferred value is half the viewport width.

The result increases with the viewport until it reaches the maximum value. It also stops shrinking once it reaches the minimum.

Mathematically, the function is equivalent to:

max(minimum, min(preferred, maximum))

If the minimum is greater than the maximum, the minimum takes precedence:

width: clamp(500px, 300px, 200px);

This produces 500px, even though it exceeds the specified maximum. For predictable results, keep the minimum no greater than the maximum.

Using Different Units

The clamp() function can combine compatible values expressed using different CSS units.

For example:

width: clamp(200px, 50%, 800px);
font-size: clamp(1rem, 3vw, 2.5rem);
padding: clamp(12px, 2vw, 2rem);
height: clamp(200px, 40vh, 500px);

The browser converts and compares values according to the receiving property's rules.

Different units must be compatible with the receiving property. For example, lengths and percentages can often be combined, but a length and a time cannot be compared as the same type.

This is invalid:

width: clamp(100px, 2s, 500px);

The preferred value is a time rather than a compatible width.

Responsive Typography

One of the most common uses of clamp() is fluid typography.

A font size can grow with the viewport while remaining within readable limits.

For example:

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

The minimum font size is 1.5rem, the preferred value combines a root-relative size with viewport width, and the maximum is 3rem.

At narrower viewport widths, the font size approaches its minimum. As the viewport grows, the font increases until reaching its maximum.

The same approach works with paragraph text:

p {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
}

For headings, a responsive type scale can use different ranges:

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

When using viewport-relative font sizes, ensure that text can still be enlarged sufficiently through browser zoom and accessibility settings.

Relative units such as rem in the boundaries help maintain accessible sizing behavior.

Responsive Element Sizing

The clamp() function can control the dimensions of cards, containers, and other interface elements.

For example:

.card {
  width: clamp(240px, 50%, 600px);
}

The card uses half the containing block's width while respecting the minimum and maximum values.

For a responsive sidebar:

.sidebar {
  width: clamp(200px, 25vw, 320px);
}

The sidebar grows with the viewport but stays within its specified range.

For a responsive height:

.hero {
  min-height: clamp(300px, 50vh, 650px);
}

The hero section's minimum height adjusts with the viewport height.

Remember that clamp() calculates a CSS value; it does not override all other layout constraints. For example, a width with a 240-pixel minimum can still overflow a containing block narrower than 240 pixels.

When an element must never exceed its available width, an additional constraint may be needed:

.card {
  width: clamp(240px, 50%, 600px);
  max-width: 100%;
}

The max-width property prevents the used width from exceeding the containing block's available width under ordinary block sizing rules.

Responsive Spacing

The clamp() function can create flexible spacing without requiring multiple media queries.

For example:

.section {
  padding: clamp(20px, 5vw, 80px);
}

The padding adjusts with the viewport width but remains between 20 and 80 pixels.

Other examples include:

.card {
  padding: clamp(12px, 2vw, 30px);
}
.layout {
  gap: clamp(10px, 3vw, 40px);
}
.heading {
  margin-bottom: clamp(16px, 2vw, 32px);
}

This is useful for maintaining consistent spacing across desktop, tablet, and mobile layouts.

Using clamp() does not eliminate the need for media queries when the layout itself must change, such as switching from multiple columns to a single column.

Using Calculations

Each argument of clamp() can contain a mathematical expression.

For example:

width: clamp(200px, 50% - 20px, 800px);

The preferred value is calculated by subtracting 20 pixels from 50% of the containing block's width.

The calc() function can also be used explicitly:

width: clamp(200px, calc(50% - 20px), 800px);

Both declarations are equivalent.

Other CSS math functions can be nested inside clamp():

width: clamp(200px, min(60%, 700px), 900px);
padding: clamp(10px, max(2vw, 15px), 40px);

Mathematical operators follow the normal CSS calculation rules. Addition and subtraction require whitespace on both sides.

For example:

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

Parentheses can control the order of operations:

width: clamp(200px, (100% - 40px) / 2, 500px);

The expression subtracts 40 pixels before dividing the result by two.

Using Custom Properties

The clamp() function can use CSS custom properties through var().

For example:

:root {
  --minimum-width: 240px;
  --preferred-width: 50%;
  --maximum-width: 600px;
}
.card {
  width: clamp(var(--minimum-width), var(--preferred-width), var(--maximum-width));
}

Changing a custom property updates the calculated width without modifying the clamp() declaration.

Custom properties can also define reusable spacing ranges:

:root {
  --spacing-small: 12px;
  --spacing-large: 48px;
}
.section {
  padding: clamp(var(--spacing-small), 4vw, var(--spacing-large));
}

The preferred padding adjusts with the viewport while remaining between the specified limits.

Custom properties must resolve to compatible values. If a substituted value is invalid, the affected declaration may become invalid at computed-value time.

Example

The following example demonstrates responsive typography using clamp().

Resize the browser window to see the heading change size while staying within its minimum and maximum limits.

HTML:

<div class="clamp-type-demo">
  <h3>Responsive CSS Heading</h3>
  <p>This heading uses clamp() to control its font size.</p>
</div>

CSS:

.clamp-type-demo {
  padding: 20px;
  border: 1px solid #ccc;
  background-color: #f5f8fc;
}
.clamp-type-demo h3 {
  margin: 0 0 12px;
  font-size: clamp(1.375rem, 1rem + 2vw, 2.5rem);
  line-height: 1.2;
  color: #0066cc;
}
.clamp-type-demo p {
  margin: 0;
}

The heading uses a minimum size of 1.375rem, a preferred value of 1rem + 2vw, and a maximum of 2.5rem.

The font size changes with the viewport until it reaches either boundary.

Spacing Example

This example uses clamp() to control the padding of a responsive box.

HTML:

<div class="clamp-spacing-demo">
  <div class="clamp-spacing-box">
    Responsive Padding
  </div>
</div>

CSS:

.clamp-spacing-demo {
  border: 1px solid #ccc;
  background-color: #f5f8fc;
}
.clamp-spacing-box {
  box-sizing: border-box;
  padding: clamp(12px, 4vw, 50px);
  background-color: #0066cc;
  color: #fff;
  text-align: center;
}

The padding adjusts with the viewport width but never falls below 12 pixels or exceeds 50 pixels.

The example uses vw, so the padding responds to the viewport rather than directly to the width of the example container.

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

The min(), max(), and clamp() functions are related CSS comparison functions.

For example:

.first {
  width: min(80%, 600px);
}
.second {
  width: max(200px, 30%);
}
.third {
  width: clamp(200px, 50%, 600px);
}

The first element uses whichever width is smaller. The second uses whichever width is larger. The third uses the preferred width while enforcing both boundaries.

The clamp() function is equivalent to combining min() and max():

width: max(200px, min(50%, 600px));

This produces the same result as:

width: clamp(200px, 50%, 600px);

Common Uses

The clamp() function is useful for responsive designs that need controlled minimum and maximum values.

For example, a responsive content container can use:

.content {
  width: clamp(280px, 80%, 1000px);
  max-width: 100%;
  margin-inline: auto;
}

The container uses 80% of the available width while respecting the specified sizing constraints.

Limitations

The clamp() function has several important rules and limitations.

• It requires three comma-separated arguments.
• The arguments must produce compatible values for the receiving CSS property.
• The function does not automatically change a layout's structure or replace every media query.
• The minimum takes precedence when it is greater than the maximum.
• Percentage values depend on the receiving property's percentage resolution rules.
• Viewport-relative values respond to the viewport, not necessarily to the containing element.
• A clamped dimension may still be affected by other CSS constraints such as min-width and max-width.
• Font sizes must remain accessible when users zoom or increase text size.

For example, this is valid:

width: clamp(200px, 50%, 600px);

However, the following is invalid because an argument is missing:

width: clamp(200px, 600px);

This is also invalid because the values have incompatible types:

width: clamp(200px, 2s, 600px);

When using clamp() for responsive typography, avoid extremely small minimum sizes or limits that prevent text from scaling adequately.

Browser Support

The clamp() function is Baseline Widely available and has been supported across major browser engines since July 2020.

Basic minimum, preferred, and maximum calculations are widely supported in modern browsers.

Some newer syntax, including the use of none for an unrestricted boundary, may have different compatibility requirements.

For a fallback, provide a conventional value before the calculation:

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

Browsers that do not support clamp() retain the earlier valid declaration.

You can also check support using @supports:

@supports (width: clamp(200px, 50%, 600px)) {
  .example {
    width: clamp(200px, 50%, 600px);
  }
}

For current compatibility information, visit Can I Use? .

Specifications

The clamp() function is defined in the CSS Values and Units Module Level 4 .

The specification defines how the minimum, preferred, and maximum expressions are evaluated and how the resulting value is constrained.

Related CSS math functions include calc(), min(), and max().