CSS clamp() Explained, with 10 Live Fluid-Sizing Demos You Can Drag

CSS clamp() Explained, with 10 Live Fluid-Sizing Demos You Can Drag

Most people meet clamp() through one copy-pasted line of fluid typography and never go further. That is a shame, because clamp() is not a typography trick — it is a general-purpose way to say "pick a value between these two limits, and let it scale in between." 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. This post explains the syntax, then gives you 10 interactive demos — 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() : it is not linear scaling, it is bounded linear scaling. 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 tabs with the full working source, plus a Fork & E…