CSS Clamp Generator for Fluid Sizes

How the CSS clamp Function Works and How the Math Is Derived

The CSS clamp function takes three arguments, a minimum, a preferred value and a maximum, and returns the preferred value unless it strays outside the bounds. Put a viewport unit in the middle argument and you get a size that scales continuously with the window while never becoming unreadable on a phone or absurd on an ultrawide monitor. This generator builds that expression from four plain numbers: the smallest size you want, the largest, and the viewport widths between which the scaling should happen. Front-end developers building fluid typography, designers specifying a type scale that works on every screen, and anyone tired of maintaining five breakpoints for one heading all use it. The interesting part is the middle argument, and the generator does the algebra. Between your two viewport widths the size should change linearly, so the slope is the size difference divided by the viewport difference. Multiply that slope by 100 and you have the vw coefficient. The line also needs an intercept, because a pure vw value would pass through zero rather than through your minimum at your chosen breakpoint, so the preferred value comes out as a fixed offset plus a vw term. Outside the range the clamp bounds take over: below your minimum viewport the minimum size holds flat, above your maximum viewport the maximum holds flat. Choosing rem for the min, max and offset rather than px means a user who raises their browser font size scales the whole thing, which is the accessible default. Do the arithmetic. Say you want a heading at 24px on a 320-pixel phone growing to 48px at 1280 pixels. The size range is 24px across a viewport range of 960 pixels, so the slope is 24 divided by 960, which is 0.025, giving a coefficient of 2.5vw. The intercept is 24 minus 0.025 times 320, which is 16px, or exactly 1rem. The finished declaration is clamp(1.5rem, 1rem + 2.5vw, 3rem). Check it at three widths: at 320 pixels the middle term is 16 plus 8 equals 24px, matching your minimum; at 800 pixels it is 16 plus 20 equals 36px, a smooth midpoint; at 1280 pixels it is 16 plus 32 equals 48px, hitting your maximum exactly. Real uses. A developer replaces four media queries on an h1 with one clamp declaration and deletes twelve lines of CSS in the process. Someone building a marketing page uses clamp for section padding so the vertical rhythm tightens on mobile without needing a separate mobile stylesheet. A design system author defines a whole type scale as clamp values, so every heading level is fluid and the ratios between them hold at any width. A developer sizing a card grid gap uses clamp so the layout feels generous on a desktop monitor and compact on a phone. A team fixes an ultrawide bug where a hero title had grown to 96px. Two points to watch. Pure vw sizing without a clamp is the mistake this function exists to fix: a heading set to 5vw is 72px on a laptop and 19px on a phone, effectively unreadable, and clamping it solves that in one line. Second, be careful with the minimum: if your minimum is too large the text will never scale at all on small screens, and if the offset is negative the value can behave unexpectedly at very narrow widths, so test the low end on a real 320-pixel viewport rather than trusting the numbers. Also remember clamp respects browser zoom properly only when the min and max use rem. Support is universal in current browsers. All calculation runs in your browser and nothing is uploaded.

🔥 Trending Tools