About CSS clamp() Generator

CSS clamp() Generator builds a fluid value: it scales linearly between a minimum and a maximum as the viewport moves between two widths, and holds at the bounds outside that range. Common for fluid typography and spacing.

It runs in the page and remembers your inputs.

How to use it

  1. Enter the smallest and largest size in px, and the viewport range they map between.
  2. Choose rem or px for the fixed parts of the expression.
  3. Copy the clamp(). The table shows the resolved size at several widths.

Common questions

What viewport range should I use?

Often your smallest supported width up to your main content max-width, for example 375 to 1440.

rem or px for the fixed parts?

rem respects the user's font-size preference; px is fixed. rem is the usual choice for typography.

How precise are the numbers?

Rounded to four decimals, which is plenty for CSS.

Is anything uploaded?

No. It is a local calculation.