CSS Clamp() Calculator
Generate a fluid clamp() value that scales smoothly between a min and max size across a viewport range.
Last updated
About this tool
The generated value is a clamp(MIN, PREFERRED, MAX) expression: below the min viewport width it holds at the min size, above the max viewport width it holds at the max size, and in between it scales linearly using a calculated vw-based formula — the same slope-and-intercept method used by most fluid-typography calculators. It works for any size property, not just font-size: padding, margin, gap, and width all accept it.
The preview below is a real <iframe>, not a resized div — vw units are always relative to the actual browser viewport, so a container alone can't demonstrate them accurately, but an iframe has its own real viewport that changes as you resize it. Nothing you enter here is sent to a server; the entire tool runs as JavaScript in your browser tab.