FAHAQ

CSS Clamp Generator

Fluid, responsive sizing with clamp().

Free CSS clamp() generator for fluid typography and spacing. Set a minimum, maximum and the viewport range, and get a clamp() value that scales smoothly between breakpoints. Runs in your browser.

How to use the CSS Clamp Generator

  1. 01Set the minimum and maximum size in rem.
  2. 02Set the viewport range the value should scale across.
  3. 03Copy the clamp() CSS for font-size, padding or gap.

Frequently asked questions

How does clamp() make sizing fluid?

clamp() takes a minimum, a preferred value that scales with the viewport width (vw), and a maximum. The result grows smoothly between your two breakpoints and never exceeds the bounds — this tool calculates the preferred value for you.