Free Tool

CSS Clamp Calculator

Set a min size, max size, and viewport range — get a fluid clamp() value with a live preview, no install, no sign-up, everything runs in your browser.

Live — resize your browser window

Fluid type scales.

Simulated at 768px → 22px

Fluid type scales.

Output unit

Presets

Generated CSS

 
 
 
 
  
 
 
How the fluid clamp() formula works
 
 clamp(MIN, PREFERRED, MAX) returns MIN below a certain viewport, MAX above another, and a value that scales linearly between them in the middle. The PREFERRED value is built from two numbers derived from your inputs:

 
     
  • Slope: (maxSize − minSize) / (maxViewport − minViewport) — how many pixels the size grows per pixel of viewport width.
    •  
  • Intersection: minSize − slope × minViewport — the size the formula would produce at a viewport width of zero, used as the fixed part of the preferred value.
    •  
  • vw coefficient: slope × 100, since 1vw is 1% of the viewport width.
    •  
 

Keeping the min and max bounds in rem (the default here) means they still respect a user's browser font-size setting, even though the vw-driven middle segment doesn't track it directly.

 

The same formula works for any length property — padding, gap, line-height, or border-radius — just swap in the property name.

 
 
  
 
 
Checking type sizes off a live site instead?
 
UICuts' font inspector grabs the exact family, size, weight, and line-height straight from any element — then hands it to your AI coding tool.
    
Get Started Free