CSS Clamp Generator

A CSS clamp() generator builds a single clamp(minimum, preferred, maximum) declaration that scales a value smoothly between two screen widths. Instead of writing several media queries to step a heading from 24px on phones to 48px on desktops, you set a minimum size, a maximum size, and the viewport range they map to, and the generator returns one line of CSS that interpolates every size in between.

The clamp() function takes three arguments: a lower bound, a preferred value, and an upper bound. The browser uses the preferred value unless it falls below the minimum or above the maximum, in which case it locks to that bound. This generator computes the preferred value as a linear function of the viewport, combining a fixed rem term with a vw term, so the result grows in step with the window while never dropping below your minimum or exceeding your maximum. This technique is often called fluid typography, though it works equally well for margins, padding, gaps, and widths.

Everything is calculated in your browser with client-side JavaScript, so nothing you enter is uploaded and the tool works offline once loaded. You can enter sizes in pixels or rem, set a custom root font size, and read a preview table showing the computed value at common viewport widths, so you can confirm the curve behaves before pasting the clamp() into your stylesheet.

Fluid sizing has one accessibility trap worth avoiding deliberately. A clamp expression whose middle term is expressed purely in viewport units ignores the reader's font-size setting, because vw does not respond to it, and text that cannot grow fails WCAG 1.4.4. Keeping a rem component in the preferred value, which is what the generated output does, means the size still responds to browser zoom and to a larger default font. Always set both bounds: without them the value scales without limit in either direction.

Here is the CSS clamp generator on a real heading. Enter 24 and 48 px as the sizes, 360 and 1440 as the viewports, keep the 16px root, and press Generate clamp(). The output is font-size: clamp(1.5rem, 1rem + 2.2222vw, 3rem);. The preview table confirms it: 24px at 360, 33.07px at 768, 38.76px at 1024 and 48px at 1440. Below 360 the heading stays at 1.5rem and above 1440 it stops at 3rem, which is the whole point of fluid typography with bounds.