CSS Clamp() Calculator

clamp() restricts a value to a range between a defined minimum and maximum, with a preferred fluid value in between. It takes three arguments: clamp(minimum, preferred, maximum). The browser uses the preferred value when it falls within the range, clamps to the minimum when the preferred would go below it, and clamps to the maximum when it would exceed it. It is most commonly used for responsive font sizes and spacing that scale smoothly with the viewport without needing media queries.

min() returns the smallest of two or more values, effectively setting a ceiling. max() returns the largest, effectively setting a floor. clamp(minimum, preferred, maximum) combines both - it is equivalent to writing max(minimum, min(preferred, maximum)). Use clamp() when you need both a floor and a ceiling around a fluid value, and min() or max() when you only need one constraint.

Using px inside clamp() means your values are fixed in absolute pixels and will not respond to a user's browser font size preference. If a user increases their default font size for accessibility, a px-based clamp will ignore that setting entirely. Using rem units ensures your fluid values scale proportionally with the user's chosen base font size, keeping your layout accessible and compliant with WCAG guidelines on text resizing.

The preferred value is typically a viewport-relative expression calculated using linear interpolation between your minimum and maximum sizes across your chosen viewport range. The formula is: slope = (maxSize - minSize) / (maxViewport - minViewport), and intercept = minSize - slope * minViewport. The preferred value then becomes calc(intercept + slope * 100vw). This is exactly what this calculator computes for you automatically - enter your min size, max size, and viewport range and the correct expression is generated instantly.

Yes - clamp() works for any CSS property that accepts a length, percentage, or number value. Common use cases beyond font sizes include padding and margins (so spacing scales with the viewport), gap values in flexbox and grid layouts, container widths to prevent elements becoming too narrow or too wide, and sizing UI elements like buttons, icons, and cards. Anywhere you would previously have written multiple @media query breakpoints to step a value up or down, clamp() can often replace them with a single smooth fluid expression.

The fluid zone is the viewport width range within which the preferred (middle) value of clamp() is active and scaling. Below the minimum viewport width, the value locks to the minimum and stops shrinking. Above the maximum viewport width, it locks to the maximum and stops growing. In between - the fluid zone - the value scales smoothly and linearly with the viewport width. Setting this range correctly is the key to fluid typography that feels natural on every screen size.

Set a minimum font size appropriate for small phones, a maximum for large desktop screens, and choose viewport breakpoints that represent the range over which you want the text to scale. Feed those four values into the calculator and copy the generated font-size: clamp(...); declaration directly into your CSS. For best accessibility, use rem units so the scale responds to user font preferences. You can optionally pair it with a fluid line-height: clamp(...); that tightens slightly as the font grows larger, which keeps large headings from appearing too loose on wide screens.

Yes. clamp() has full support across all modern browsers - Chrome 79+, Firefox 75+, Safari 13.1+, and Edge 79+. Global browser support is above 96%. For the small percentage of older browsers that do not support it, the safest approach is to include a plain fallback value on the line before the clamp() declaration, for example font-size: 1.25rem; font-size: clamp(...); - browsers that understand clamp() will use it, others will fall back to the fixed value above.

Fluid line-height means your line-height value also scales with the viewport using clamp(), rather than staying fixed. As font sizes increase on wider screens, a fixed line-height ratio can make headings appear too loose and airy. By setting the minimum viewport line-height slightly higher than the maximum (for example 1.5 on mobile down to 1.2 on desktop), you get an inverse scaling effect - the leading tightens naturally as type grows, giving large headings a more professional, print-like appearance.

For fluid sizing and typography, clamp() can often replace the repetitive step-based @media queries that previously handled incremental size changes. Instead of defining a font size at three or four breakpoints, a single clamp() expression covers the entire range smoothly. However, clamp() is not a full replacement for media queries - layout changes like switching from a single-column to a multi-column grid, showing or hiding elements, or changing component structure still need media queries. Think of clamp() as handling the gradual scaling within a layout, while media queries handle the structural shifts.