{"id":41,"date":"2026-10-02T10:32:42","date_gmt":"2026-10-02T10:32:42","guid":{"rendered":"https:\/\/webdevpuneet.com\/blog\/?p=41"},"modified":"2026-10-02T10:32:46","modified_gmt":"2026-10-02T10:32:46","slug":"css-clamp-explained-with-10-live-fluid-sizing-demos-you-can-drag","status":"publish","type":"post","link":"https:\/\/webdevpuneet.com\/blog\/css-clamp-explained-with-10-live-fluid-sizing-demos-you-can-drag\/","title":{"rendered":"CSS clamp() Explained, with 10 Live Fluid-Sizing Demos You Can Drag"},"content":{"rendered":"

<\/p>\n\n\n

Most people meet clamp()<\/code> through one copy-pasted line of fluid typography and never go further. That is a shame, because clamp()<\/code> is not a typography trick \u2014 it is a general-purpose way to say “pick a value between these two limits, and let it scale in between.”<\/em> It works on padding, gaps, border-radius, letter-spacing, custom properties, anything that takes a length. Learn the one function and you delete a stack of media queries.<\/p>\n\n\n\n

This post explains the syntax, then gives you 10 interactive demos<\/strong> \u2014 each one a small box with a drag handle on the right edge. Drag it and watch the value in the readout change live, both flattening out at its floor and its ceiling and gliding smoothly in between. That flattening is the whole point of clamp()<\/code>: it is not linear scaling, it is bounded<\/em> linear scaling.<\/p>\n\n\n\n

Dragging the handle is the fast way to see the concept, but it isn’t the whole demo. Every embed below has its own HTML \/ CSS \/ JS<\/strong> tabs with the full working source, plus a Fork & Edit<\/strong> button that opens that exact snippet \u2014 already loaded, already running \u2014 in My Code<\/a>, webdevpuneet.com’s free in-browser editor. Change a floor, change a ceiling, swap cqw<\/code> for vw<\/code>, break it, fix it. That loop \u2014 predict what a number change will do, then actually watch it happen \u2014 teaches clamp()<\/code> faster than reading ten more paragraphs about it ever will. Nothing you edit there touches this page or leaves your browser until you decide to save it.<\/p>\n\n\n\n

The syntax, in one breath<\/h2>\n\n\n\n

property: clamp(MINIMUM, PREFERRED, MAXIMUM);<\/code><\/pre><\/p>\n\n\n\n
clamp()<\/code> takes three comma-separated values and returns whichever one applies:<\/p>\n\n\n\n
    \n
  • If the preferred<\/strong> value would compute below the minimum, the browser uses the minimum<\/strong> instead \u2014 the value is floored.<\/li>\n\n\n\n
  • If the preferred value would compute above the maximum, the browser uses the maximum<\/strong> instead \u2014 the value is capped.<\/li>\n\n\n\n
  • Otherwise, the preferred value is used exactly as computed.<\/li>\n<\/ul>\n\n\n\n
    The trick that makes it “fluid” is that the preferred<\/strong> argument is usually a relative unit \u2014 vw<\/code> (a percentage of the viewport width), %<\/code>, or as in every demo below, cqw<\/code> (a percentage of a container’s width). Because that middle value is relative, it recomputes continuously as the viewport or container resizes, and the min\/max simply stop it from ever going too far in either direction. You are looking at three fixed points doing the job of an entire @media<\/code> block.<\/p>\n\n\n\n
    Why these demos use cqw, not vw<\/h2>\n\n\n\n
    The classic fluid-typography formula you’ll see everywhere is font-size: clamp(1.25rem, 1rem + 2vw, 3rem)<\/code> \u2014 vw<\/code> ties the preferred value to the real browser viewport. That is exactly right for a real page, but it makes for a broken demo: embedded in an iframe on this page, the “viewport” is the iframe’s own width, and you cannot usefully resize an iframe by dragging inside it.<\/p>\n\n\n\n
    So every demo below uses cqw<\/code><\/strong> instead of vw<\/code>. It is CSS Container Query Units \u2014 1cqw<\/code> is 1% of the width of the nearest ancestor with container-type: inline-size<\/code> set on it. Each demo wraps its element in exactly that kind of container, so when you drag the handle and resize that specific box<\/em>, the clamped value responds to it directly \u2014 no need to touch your actual browser window. Everything else about clamp()<\/code> \u2014 the syntax, the floor\/ceiling behaviour, the reasoning for using it \u2014 is identical whether the preferred value is driven by vw<\/code>, %<\/code>, or cqw<\/code>. Swap cqw<\/code> for vw<\/code> in your own project and you get the classic viewport-fluid version; the mechanics you’re seeing here don’t change.<\/p>\n\n\n\n
    One caveat worth knowing:<\/strong> -webkit-line-clamp<\/code> is a different, unrelated CSS property \u2014 it truncates multi-line text to a fixed number of lines with an ellipsis. It shares a name with clamp()<\/code> and nothing else. If you searched for “CSS clamp” hoping to truncate a paragraph, that’s the property you want instead.<\/p>\n\n\n\n
    1. Fluid Heading Typography<\/h2>\n\n\n\n
    The canonical clamp() formula: a rem<\/code> floor, a rem<\/code>-plus-relative-unit preferred value, and a rem<\/code> ceiling. Drag the handle and the headline scales continuously between 20px and 48px.<\/p>\n\n\n\n