CSS Clamp Generator

How to use

1. 1Pick a starter preset (Body text, Hero heading, Section heading, Section padding, Card radius) or set your own min and max values.
2. 2Choose the viewport range where the value should fluidly scale: the smaller viewport applies the smaller value and the larger viewport applies the larger value.
3. 3Set the root font size (16 px is the browser default) and pick rem or px output. rem is recommended for accessibility because it respects the user's font preference.
4. 4Drag the live preview slider to simulate any viewport width between the two anchors and read the resolved size and clamp status as you move it.
5. 5Click Copy value for the bare clamp() expression, Copy as font-size for a ready-made declaration, or Copy Tailwind class for a utility-first project.

About this tool

CSS Clamp Generator builds the modern clamp() expression for fluid typography and spacing in your browser. Pick the viewport width where the smaller value should apply, the viewport width where the larger value should apply, and the size at each end. The tool solves the linear system in rem-space and emits a clamp(min, A*vw + B*rem, max) value that scales smoothly between the two anchor sizes inside the range and stays pinned at the bounds outside it. Quick presets cover the everyday cases (body text 16 to 18, hero h1 32 to 64, section h2 24 to 40, small text 12 to 14, section padding 24 to 96, card radius 12 to 32) and viewport range presets cover the common breakpoints (320 to 1240, 360 to 1440, 375 to 1280, 480 to 1920) so you can drop a sensible default in one click. The output panel shows the resulting clamp() value in rem (recommended for accessibility because it respects the user's root font size) or px, plus a ready-to-paste font-size declaration and a Tailwind v3+ arbitrary-value utility class. A live preview slider lets you drag a simulated viewport width across the full range and see the resolved size in real time, with a sample text rendered at that exact size and a status badge that flips between Clamped at boundary and In fluid range. The math summary surfaces the actual vw coefficient and rem offset so designers and developers can verify the linear interpolation by hand, and the lower bound is always emitted as the smaller of the two anchor values so swapping anchor sizes still produces valid CSS. Useful for fluid headings, body type that grows with the viewport, fluid section padding, container widths, border radius, gap, and any other length that should scale smoothly between two breakpoints without a media-query ladder. Everything runs locally in your browser. The numbers you type here never leave your device.

Free to use. Works in your browser. No signup, no login.