Skip to content
Related Articles

Related Articles

CSS clamp() Method
  • Last Updated : 15 Oct, 2020

The clamp() method is used to clamp the value between an upper and lower bound. It takes three parameters which are listed below:

  • Minimum value
  • Preferred value
  • Maximum value

The minimum value comes in handy when the preferred value is smaller than the minimum value similarly maximum value comes in handy when the preferred value is more than the maximum value. The preferred value becomes useful when it is between the minimum and maximum value.

The clamp() function can be used with the various elements such as font-size, width etc. Lets built a simple layout to get a clear understanding of the clamp() function

Syntax : 

clamp(value1, value2, value3)

Parameters:



  • Here value1 represents the minimum value, value2 represents the preferred value and value3 represents the maximum value.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
  
        /* Setting clamp property of heading */
        h1 {
            font-size: clamp(2rem, 4vw, 4rem);
            color: #eb4034;
        }
  
        /* Setting clamp property of box */
        .box {
            width: clamp(150px, 50%, 400px);
            height: 8rem;
            background: #5f76e8;
        }
    </style>
</head>
  
<body>
    <div class="container">
        <h1>Welcome To GFG</h1>
        <div class="box"></div>
    </div>
</body>
  
</html>

chevron_right


Output:

In the above-shown example, we see how easily the width and font-size are adjusted according to viewport with the help of the clamp function. The clamp() function is very useful for typography and for creating fluid layout.

Supported Browsers:

  • Chrome
  • Opera
  • Safari
  • Firefox
  • Edge
My Personal Notes arrow_drop_up
Recommended Articles
Page :