CSS Clamp Calculator

Fluid type and spacing

Give a minimum and maximum viewport width, and the size you want at each. This computes a CSS clamp() that scales linearly between them with a vw-based preferred value. All math runs locally in your browser.

Inputs
px
px
px
px
Nothing is uploaded. This tool makes no network calls.
Result
clamp(...)

The quick brown fox jumps over the lazy dog.

The math

  1. Slope is the change in size over the change in viewport: . This is unitless px per px.
  2. As a percentage of the viewport that is the vw part: .
  3. The intercept is the size the line would have at a viewport of 0: . That is the fixed part.
  4. Preferred value is intercept + slope * viewport, written as .
  5. clamp() then holds the result between the min and max so it never goes below or above .