CSS clamp() Function

CSS Update

The CSS clamp() comparison function allows to set the value of a property between a minimum and maximum value.

CSS clamp() takes 3 values as parameters — minimum value, preferred value & maximum value. Parameters can be in different CSS units.

#img {
	width: clamp(300px, 40%, 500px);

In the above example we are trying to set a responsive width for an image. Using clamp(), we set the preferred width of the image as 40% of the parent's width. However the minimum width has to be 300px and maximum width can be 500px.

CSS clamp() can be useful in cases where we need the value to be in between 2 values.

Browser Compatibility

Tutorials & Resources

April 18, 2020


Loading Comments