Home > Tips & Tricks > clamp() Function in CSS

clamp() Function in CSS

The CSS clamp() function is a powerful tool for setting property values within a specified range, enabling responsive typography and adaptable layouts.

It allows developers to define minimum and maximum limits for property values, ensuring optimal readability and aesthetics across various screen sizes.

For instance, applying clamp() to font size (font-size: clamp(16px, 3vw, 24px)) ensures text remains legible while dynamically adjusting based on viewport dimensions.

You can also use this function for widths, heights, margins, and padding, making it a versatile asset in web design.

By using clamp(), developers can create user-friendly interfaces that adapt seamlessly to diverse devices and screen sizes. Let’s take some examples to understand its usage.

Responsive Typography

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

In this example, the font size of <p> elements is set using clamp(). The font size will scale dynamically between 16 pixels and 24 pixels, based on the viewport width (3vw). This ensures optimal readability across different screen sizes while maintaining aesthetic appeal.

Dynamic Widths

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

Here, the width of the .container element is constrained to be between 300 pixels and 800 pixels, with a fallback width of 50% if the viewport width exceeds the specified range. This ensures that the container remains within a desirable size range while adapting to varying screen sizes.

Adaptable Margins

.element {
    margin: clamp(10px, 5%, 30px) auto;

This example demonstrates the use of clamp() to set margins for an element. The margins will adjust dynamically between 10 pixels and 30 pixels (with a fallback of 5% if available space permits), ensuring consistent spacing around the element regardless of viewport size.

Flexible Heights

.box {
    height: clamp(200px, 20vh, 500px);

Here, the height of .box is set to be between 200 pixels and 500 pixels, with a minimum height of 20% of the viewport height (20vh). This ensures that the box remains visible and appropriately sized across different devices and screen resolutions.

More Tricks


What is the CSS clamp() function?

The clamp() function in CSS allows developers to set property values within a specified range, ensuring responsive design and adaptable layouts.

How does clamp() benefit responsive typography?

clamp() enables responsive typography by dynamically adjusting font sizes based on viewport dimensions, ensuring optimal readability across different screen sizes.

Can clamp() be applied to other CSS properties besides font size?

Yes, clamp() can be used for various CSS properties, including widths, heights, margins, and padding, providing flexibility in creating adaptable layouts.

Photo of author

About Aman Mehra

Hey there! I'm Aman Mehra, a full-stack developer with over six years of hands-on experience in the industry. I've dedicated myself to mastering the ins and outs of PHP, WordPress, ReactJS, NodeJS, and AWS, so you can trust me to handle your web development needs with expertise and finesse. In 2021, I decided to share my knowledge and insights with the world by starting this blog. It's been an incredible journey so far, and I've had the opportunity to learn and grow alongside my readers. Whether you're a seasoned developer or just dipping your toes into the world of web development, I'm here to provide valuable content and solutions to help you succeed. So, stick around, explore the blog, and feel free to reach out if you have any questions or suggestions. Together, let's navigate the exciting world of web development!

Leave a Comment