Micro Tools
Advertisement

Clamp Generator

Build fluid CSS clamp() values for free. Drag sliders for min/max size and viewport, preview the fluid type live, and copy the generated CSS.

Fluid type settings

Drag the sliders and watch the preview scale.

Preview and code

Fluid typography scales smoothly

Advertisement

What clamp() does

CSS clamp(min, preferred, max) sets a fluid value that grows with the viewport but never leaves your chosen bounds. For typography that means text scales smoothly from phone to desktop with a single declaration, no media queries needed.

This tool computes the middle preferred value from your min/max sizes and viewport range, so the fluid slope is mathematically exact.

Reading the generated code

The output combines a fixed pixel part with a vw part, for example clamp(16px, 12px + 1.25vw, 32px). Browsers interpolate between your breakpoints and clamp at both ends.

The preview width slider simulates different screens so you can see the scaling live. Use it to confirm the text stays readable at phone widths before shipping the CSS.

Related tools

JSON formatterFormat and validate JSON, privately. Regex testerTest regex live with highlighting. Base64 encoderBase64 encode and decode, plus URL encoder and JWT decoder.

Clamp Generator FAQs

Does clamp() work in all browsers?
All modern browsers support clamp() since 2020. For very old browsers, declare a plain font-size fallback on the line before.
Why does the preview sometimes not change?
Outside your viewport range the value is clamped to min or max, so dragging the preview slider beyond those points correctly shows no change.
Can I use this for spacing, not just type?
Yes. The same clamp() pattern works for padding, gaps and container widths. Just treat the px values as whatever property you are sizing.
What is the vw part of the formula?
It is the slope of the fluid line: how many pixels the size grows per 1% of viewport width, plus a base offset so the line passes through your min and max points.
Is the generated CSS really just one line?
Yes. Paste it into any font-size declaration and delete the media queries it replaces.
Advertisement