CSS clamp() Calculator for Fluid Type and Spacing

clamp(min, preferred, max) returns the preferred value but never lets it drop below the min or rise above the max. When the preferred value includes a vw unit, it scales fluidly with the viewport, so one declaration replaces a stack of breakpoint media queries.

The rem part is a fixed base that respects the user's root font size, and the vw part adds growth tied to the viewport width. Added together they form the straight line that passes through your two size-and-breakpoint points.

The slope is (max size minus min size) divided by (max viewport minus min viewport), then multiplied by 100 to express it as a vw value. For 16px to 32px across 320px to 1280px that is 16 divided by 960 times 100, which rounds to 1.6667vw.

The calculator computes the line's y-intercept in px as min size minus slope times min viewport, then divides by the root font size to convert to rem. For the 16px to 32px example the intercept is 10.6667px, which is 0.6667rem at a 16px root.

Yes. The 'Root font size' field defaults to 16px, matching most browsers. If your project sets a different root size, update the field so the rem numbers in the output convert against the correct base.

Yes. The math is identical for any length, so you can paste the clamp() value into margin, padding, gap, or width. The generated preview shows 'font-size:' as a sample declaration, but the clamp() value itself works for any property that accepts a length.

That works too. When the max size is smaller than the min size the slope is negative, and the calculator still pins the clamp() bounds to the smaller and larger of the two values so the result stays clamped correctly at both ends.

Because the fixed base is expressed in rem, the value scales with the user's browser font-size preference and page zoom, which keeps fluid type readable. A purely vw-based value would ignore those settings, so the rem base matters for accessibility.

The slope divides by the gap between the two viewport widths, so identical widths would divide by zero and describe a vertical line with no single answer. The calculator reports an error and asks you to set two different breakpoints.