What does clamp() actually do?

clamp(min, preferred, max) picks the preferred value, but never lets it go below min or above max — here, the preferred value is a formula that scales linearly with viewport width, creating smooth fluid scaling between your two breakpoints.

Why use vw units in the preferred value?

vw (viewport width) is what makes the value respond to screen size — 1vw equals 1% of the viewport width, so combining it with a fixed rem offset produces the linear scaling effect.

CSS clamp() Calculator

Generate a fluid clamp() value that scales smoothly between a minimum and maximum size across viewport widths.

Minimum size (px)Maximum size (px)Minimum viewport (px)Maximum viewport (px)

clamp(1.0000rem, 0.6667rem + 1.6667vw, 2.0000rem)

Scales linearly between the minimum size at the minimum viewport width and the maximum size at the maximum viewport width, then stays fixed outside that range — the standard "fluid typography" pattern.

Processing happens locally in your browser. Nothing you enter is uploaded.

How It Works

Enter your minimum and maximum sizes and the viewport widths they should apply at. Copy the generated clamp() value directly into your CSS.

clamp(minimum, minimum + slope × viewport width, maximum), where slope is the rate of change between your two size/viewport pairs

Example

A heading that's 16px at a 320px viewport and 32px at a 1280px viewport generates clamp(1rem, 0.6667rem + 1.6667vw, 2rem).

Frequently Asked Questions

What does clamp() actually do?: clamp(min, preferred, max) picks the preferred value, but never lets it go below min or above max — here, the preferred value is a formula that scales linearly with viewport width, creating smooth fluid scaling between your two breakpoints.
Why use vw units in the preferred value?: vw (viewport width) is what makes the value respond to screen size — 1vw equals 1% of the viewport width, so combining it with a fixed rem offset produces the linear scaling effect.

Related Tools

PX to REM Converter