CSS Font Clamp Generator

Manually control all three parts of the clamp() function (min, preferred, max) — understand it with a visual scale bar.

clamp( min, preferred, max )

clamp() takes three values: if the preferred value is smaller than min, min is used; if it's larger than max, max is used — otherwise, the preferred value.

100% browser-based — no data sent to any server
Clamp Font Size
min: 1remcurrent viewportmax: 3rem
style.css

      
Copied to clipboard!