clamp() CSS Function

clamp() CSS Function

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The clamp() CSS function is a powerful utility that allows you to define a value that is constrained between an upper and lower limit, while still remaining flexible based on the viewport or other dynamic factors. Essentially, it takes three arguments: a minimum value, a preferred value, and a maximum value. The computed value of clamp() will never fall below the minimum or exceed the maximum, but it will try to use the preferred value whenever possible. This makes it particularly useful for responsive design, as it can adapt properties like font-size, width, or margin without relying on media queries.

For example, you could set a font size that grows with the viewport but never becomes too small or too large:

p {
  font-size: clamp(16px, 2vw, 24px);
}

In this example, the paragraph's font size will scale with the width of the viewport, using 2% of the viewport width as the preferred size, but it will not shrink below 16px or exceed 24px.

The clamp() function works well in combination with other CSS functions such as calc(), allowing for even more complex responsive calculations. It can be applied to nearly any CSS length or size-related property, making it a versatile tool for creating fluid layouts and typography.

Another practical use is setting responsive padding or gap values that adjust with the viewport but remain within a reasonable range:

.container {
  padding: clamp(1rem, 5vw, 3rem);
  gap: clamp(0.5rem, 2vw, 2rem);
}

Here, the container will maintain usable spacing across different screen sizes while avoiding extremes.

Syntax

property: clamp(minimum, preferred, maximum);

Values

minimumThe absolute floor for the value. Even if the preferred value calculates to something smaller, the browser will not go below this number.
preferredThe "ideal" value. This is usually a relative unit (like vw, vh, or a percentage) that allows the element to grow or shrink with the viewport.
maximumThe absolute ceiling. Even if the preferred value calculates to something larger, the browser will cap it here.

Example

HTML

<body>



  <div class="container">

    <h1>Responsive Heading</h1>

    <p>

      Resize your browser window width to see this text grow and 

      shrink fluently between its defined limits.

    </p>

  </div>



</body>

CSS

h1 {

  font-family: sans-serif;

  color: #333;

  

  /* Minimum: 1.5rem 

     Preferred: 5vw (scales with window size)

     Maximum: 4rem 

  */

  font-size: clamp(1.5rem, 5vw, 4rem);

}



.container {

  width: 80%;

  margin: 0 auto;

  padding: 20px;

  border: 2px solid #ccc;

  

  /* You can also use clamp for widths! */

  /* Min 300px, Preferred 50%, Max 800px */

  width: clamp(300px, 50%, 800px);

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS clamp() function. Hover over a browser icon to see the version that first introduced support for this CSS function.