CSS clamp() Function

❮ Previous Functions Next ❯


.example1 {
  font-size: clamp(1.5rem, 2.5vw, 4rem);

.example2 {
  font-size: clamp(1rem, 2.5vw, 2rem);

The font-size of this text varies depending on the base font of the page, and the size of the viewport.


The clamp() css function clamps a value between an upper and lower bound.

The clamp() function takes three values, and order matters.

An area you may have already encountered the use of clamp() is for fluid typography.

The essential concept is that the font-size value can fluidly adjust based on the viewport size.

This is intended to prevent large headlines triggering overflow, or taking up too much of the viewport.

Version: CSS3

Standard Syntax


Browser Support

The numbers in the table specify the first browser version that fully supports the property.


Function Arguments

The following table describes the arguments of this function.

Argument Description
value Specifies the value in pixels, number, percentage, etc.
❮ Previous Functions Next ❯