clamp()

The CSS clamp() function locks a value between a minimum and maximum, using a preferred value within that range.

.container {
  width: clamp(200px, 50%, 800px); /* 200px min, 50% preferred, 800px max */
}

As its name implies, the CSS clamp() function clamps the middle value between a maximum and minimum bound. It’s like having min() and max() in one neat package — perfect for fluid, controlled scaling. Want a container that’s never too small or too large but adapts smoothly? clamp() nails it.

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

Syntax

<clamp()> = clamp( [ <calc-sum> | none ], <calc-sum>, [ <calc-sum> | none ] )

Arguments

The clamp() function takes exactly three arguments:

• Minimum: The smallest allowed value.
• Preferred: The ideal value (often fluid, like vw or %).
• Maximum: The largest allowed value.

clamp(minimum, preferred, maximum);

Among the values each of the arguments can take, while they are usually lengths (e.g. 100px, 20vw, 10rem, etc.), they can be any <number>, <dimension> or <percentage>. It can also take the none keyword, which means the value is not clamped on that side, so clamp(a, b, none) is the same as max(a, b).

Basic usage

The clamp() function is a responsive design superstar. It evaluates its three arguments dynamically: if the preferred value dips below the minimum, it uses the minimum; if it exceeds the maximum, it uses the maximum; otherwise, it goes with the preferred. It is perfect for properties like width, height, or font-size.

For instance, clamp(14px, 2.5vw, 24px) keeps text between 14px and 24px, scaling with 2.5vw. Also, the units must be comparable — mixing px, %, and vw is fine, but avoid auto.

Let’s get hands-on with clamp() to see its magic. Here’s a quick example that sets a fluid container width:

.container {
  width: clamp(200px, 50%, 800px); /* Min 200px, prefers 50%, max 800px */
  padding: 20px;
  background: #3498db;
  color: white;
  text-align: center;

  &:hover {
    width: clamp(250px, 60%, 900px); /* Slightly wider range on hover */
  }
}

The container stays between 200px and 800px, scaling to 50% of its parent when it fits. On hover, it shifts to a 250px–900px range—smooth, predictable, and perfect for responsive layouts or interactive elements.

Fluid containers

Imagine you want a container to grow with the screen size but stay within a reasonable size. With clamp(), you can set a range so it’s never too tiny or overwhelmingly huge. Let’s say we’re working with a range between 200px and 800px. Here’s how it plays out:

.container {
  width: clamp(200px, 50%, 800px); /* 200px min, 50% preferred, 800px max */
  margin: 0 auto;
  background: #f0f0f0;
  padding: 20px;
  text-align: center;
}

Resize the following demo to see the responsive container’s size adapt.

Fluid typography

The cool thing about clamp() is that it isn’t limited to an element’s dimensions. We might as well use it to change an element’s font size! Take, for example, the following snippet:

.heading {
  font-size: clamp(16px, 4vw, 32px); /* 16px min, 4vw preferred, 32px max */
  line-height: 1.3;
}

On an 800px-wide screen, 4vw means 4% of 800px, which is 32px. Since 32px matches the maximum, the heading’s font size settles at 32px — which is big and bold but not over the top.

Now, picture a smaller 300px-wide screen (like a phone): 4vw is 12px, below the 16px minimum, so it bumps up to 16px, keeping the text legible. On a massive 1200px screen, 4vw is 48px, exceeding the 32px max, so it caps at 32px again.

The heading stays between 16px and 32px, growing to 4vw on medium screens. It’s a go-to for responsive typography without media queries.

Controlled spacing

You can also keep your container’s padding fluid while keeping boundaries.

.card {
  padding: clamp(10px, 5%, 30px); /* 10px min, 5% preferred, 30px max */
  background: #f9f9f9;
  border-radius: 8px;
}

The padding adjusts from 10px to 30px based on the container’s size, ensuring consistency across different screen widths.

Responsive grid gaps

clamp() can help you balance grid spacing dynamically as the device screen scales larger or smaller:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 3vw, 40px); /* 10px min, 3vw preferred, 40px max */
}

.grid-item {
  background: #e74c3c;
  padding: 20px;
}

The grid gaps stay between 10px and 40px, scaling with 3vw for a polished grid layout on any screen.

Math with clamp()

We can make calculations inside any of the clamp() arguments, although they are more common inside the second argument. One thing to note, in the past, we needed to use the calc() function, but nowadays, calculations inside min(), max() and clamp() don’t need to it. A win for cleaner CSS!

.section {
  width: clamp(300px, 50% + 2rem, 1000px); /* Dynamic preferred value */
  margin: 0 auto;
  background: #ecf0f1;
  padding: 20px;
}

The section’s width stays between 300px and 1000px, with a preferred value offset by 2rem, making it ideal for precise and responsive designs.

clamp() vs. other CSS approaches

The clamp() function stands out among popular CSS techniques for sizing and scaling. Unlike fixed units, media queries, or even its siblings min() and max(), clamp() offers a unique blend of fluidity and control in one line.

Here’s how it compares.

	clamp()	Fixed units (e.g. width: 500px)	Media Queries	min() / max()
Purpose	Sets a value within a min/max range with a preferred value.	Sets a static, unchanging value.	Applies styles at specific breakpoints.	Picks the smallest or largest from options.
Syntax	clamp(200px, 50%, 800px)	width: 500px	@media (min-width: 600px) { width: 50%; }	min(50%, 500px) or max(25%, 200px)
Behaviour	Fluidly scales between min and max.	Rigid, no responsiveness.	Picks the smallest or largest from options.	Caps at one end (min or max) only.
Uniqueness	Combines floor, ceiling, and fluid scaling.	No adaptability to context.	Requires multiple rules for ranges.	Lacks built-in range control.
Use Case	Responsive typography or layouts with bounds.	Fixed-size elements like icons.	Layout shifts or conditional styling.	Single-bound constraints (min or max).

What makes clamp() unique is its all-in-one nature. It is the only CSS property that delivers fluid scaling with built-in minimum and maximum limits by reducing reliance on multiple rules or functions. It is the Swiss Army knife of responsive sizing.

Browser support

clamp() is supported in modern browsers (Chrome, Firefox, Safari, Edge) since 2020.

Specification

The clamp() function is defined in the CSS Fonts Module Level 4 specification, which is currently in Editor’s Draft.

More information

• CSS min(), max(), and clamp() (Una Kravets)
• A guide to the min(), max(), and clamp() CSS functions (Bryan Rasmussen)
• Modern Fluid Typography Using CSS Clamp (Adrian Bece)

Related