Which browsers support clamp()?

clamp() is supported in all modern browsers: Chrome 79+, Firefox 75+, Safari 13.1+, and Edge 79+. It works on both desktop and mobile. Global support exceeds 95% as of 2024.

Generate responsive, fluid designs with CSS clamp

CSS Clamp Generator

Q: What units does clamp() support?

Any CSS length unit: px, rem, em, vw, vh, %, ch, etc. You can mix units within the same clamp() function, but the preferred value typically uses vw for fluid scaling.

Q: When should I use clamp() instead of min() or max()?

Use clamp() when you need both an upper and lower bound — it combines max(min, preferred) and min(preferred, max) into a single function. Use min() when you only need an upper bound, and max() for a lower bound. clamp() is ideal for fluid typography, spacing, and sizing.

Q: Does clamp() improve accessibility?

Yes. When used with rem units, clamp() respects the user's browser font-size setting. Unlike fixed px values, fluid sizing ensures content remains readable at all zoom levels without horizontal scrolling.

Settings

CSS Property

Unit

Small Screen

Minimum size, applies at the smallest viewport.

Large Screen

Maximum size, applies at the largest viewport.

Viewport Range

Scaling activates between these breakpoints.

Starts at

Stops at

Generated CSS

font-size: clamp(1rem, 5.4348vw - 1.0435rem, 3rem);

Minimum16px

Maximum48px

Scaling starts480px

Scaling stops1400px

Presets

Click a preset to load common values.

Live Preview

320px 860px 1920px

860px

Hero heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Click Me

375px

Heading

Body text

768px

Heading

Body text

1440px

Heading

Body text

How `clamp()` Works

The CSS clamp() function takes three parameters: a minimum value, a preferred value, and a maximum value. The browser selects the preferred value whenever it falls between the minimum and maximum bounds. If the preferred value drops below the minimum, the minimum is used. If it exceeds the maximum, the maximum is used.

This enables fluid typography and spacing — values that scale smoothly between viewport breakpoints without needing media queries. The formula for the preferred value uses viewport units (vw) and a base offset to create a linear interpolation between the min and max sizes across the chosen viewport range.

Practical Examples

/* Fluid heading: scales from 32px to 72px between 480px and 1200px */
h1 {
  font-size: clamp(2rem, 4.4444vw + 0.6667rem, 4.5rem);
}

/* Fluid padding: scales from 16px to 48px */
.container {
  padding: clamp(1rem, 3.5556vw + 0.0667rem, 3rem);
}

/* Fluid gap with rem units */
.grid {
  gap: clamp(0.75rem, 2.2222vw + 0.3333rem, 1.5rem);
}

For consistent scaling, pair clamp() with a typographic scale and use rem units to respect user font-size preferences. This approach eliminates hard breakpoints and creates a truly responsive design that adapts to every screen size.

Frequently Asked Questions

What units does clamp() support?

It supports any CSS length unit (px, rem, em, vw, vh, %, ch, etc.) You can mix units within the same clamp() function, but the typically using vw is preferred for responsive/fluid scaling.

What is clamp()'s browser support?

clamp() is supported in all modern browsers (Chrome 79+, Firefox 75+, Safari 13.1+, Edge 79+). It works on desktop and mobile.

When should I use clamp() instead of min() or max()?

Use clamp() when you need to define an upper and lower bound - it combines max(min, preferred) and min(preferred, max). Otherwise, min() is for only an upper bound, and max() is for a lower bound.

Does clamp() improve accessibility?

Yes, when used with rem, clamp() uses the user's browser font settings. This means content remains readable at all zoom levels without dreadful horizontal scrolling.