CSS Clamp Generator

About the CSS Clamp Generator

A fluid size uses clamp(min, preferred, max): the browser follows the preferred value but never goes below the minimum or above the maximum. The preferred value here is a straight line through two points: the smallest size at the smallest viewport width and the largest size at the largest. The slope is the change in size divided by the change in width, which gives the vw part, and the starting point at zero width gives the rem part. For 16px growing to 20px between viewports of 320px and 1280px, that is clamp(1rem, 0.9167rem + 0.4167vw, 1.25rem), and at an 800px viewport the size is exactly 18px. The tool takes sizes in px or rem, converts rem with the root font size (16px by default), rounds to four decimals, and also writes the same value in px for tools that do not take rem. A size that shrinks as the viewport grows is handled too, with the smaller size always written first because clamp() needs its minimum below its maximum. Using rem in the preferred value, and not vw alone, keeps text responsive to the visitor's own font size setting. The reading box accepts values made of px, rem and vw, including calc(). Nothing is uploaded.