Root font size
Device size
px
px
Desired values
px
px
Your clamp() function
clamp(6rem, 5.9642vw + 3.8529rem, 12rem)

// Clamp Calculator

CSS Fluid Responsive Clamp Calculator

Need clamp() on repeat? This calculator delivers accurate, reusable formulas for fluid responsiveness. Add it to your toolkit and come back often.

Most clamp generators only support a single direction (values always increase or always decrease across the range). This tool supports both directions: your values can grow or shrink as the viewport changes—desktop to mobile or mobile to desktop—while staying smooth within the configured range and strictly honoring min/max limits.

Set your Min/Max Device Sizes, then enter the Desired Values for each end of the range (e.g., minimum width = 16px, maximum width = 24px—or swap them). The calculator computes slope and intercept from these endpoints and outputs a clamp formula that scales correctly in either direction.

Switching 62.5% (1rem = 10px) or 100% (1rem = 16px) affects the rem conversion and constant term in the generated clamp formula only. The live preview renders in pixels for a clear, unambiguous visual check against your input values.

The preview width is strictly constrained to your Min and Max Device Sizes. When it reaches either boundary, the text is clamped to the corresponding Minimum/Maximum Value—matching CSS clamp behavior and preventing overflow or jumps.

The copied CSS formula (vw + rem) works for font-size and other responsive properties like spacing (margin/padding), gap, and radius—any attribute that should scale smoothly within defined bounds.

  • Drag the preview to the minimum width: text should equal your Minimum Value.
  • Drag to the maximum width: text should equal your Maximum Value.
  • Between those points, the text scales linearly in the direction you set (including “desktop smaller, mobile larger” or vice versa).