CSS clamp() Generator

Make type scale smoothly with the screen

CSS clamp() lets a value grow fluidly between a set minimum and maximum as the screen size changes, instead of holding still and then jumping abruptly at fixed breakpoints. This generator builds a clamp() value for fluid typography or spacing that scales smoothly between the two sizes you specify, so text and gaps stay proportionate at every width. It computes the tricky scaling middle term for you, which is the part that is awkward to work out by hand.

Why fluid beats stepped

With traditional breakpoints, a font size stays completely fixed and then jumps suddenly the instant a width threshold is crossed, which can look jarring and also leaves plenty of awkward in-between sizes at widths that fall between your breakpoints. clamp() instead interpolates smoothly across the whole range, so the text is always perfectly proportionate to the viewport, never too large on a small phone nor too small on a wide desktop, and it typically needs far fewer breakpoints overall. It takes a minimum, a preferred value that scales, and a maximum.

Copy the clamp value

It runs entirely in your browser, so nothing you enter is uploaded and the generated code is yours to paste straight into a project. Because it works client-side, you can iterate freely, regenerating as often as you like without a round trip to any server.

Related tools

• Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
• Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
• Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
• Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.