Developer

CSS Clamp Calculator

Pick a minimum and maximum size and the screen widths between them — get a clamp() value that scales smoothly, with no media queries.

Settings

Unit

Used on small screens

Used on large screens

Screen width where scaling starts

Screen width where scaling stops

1rem in px — 16 in every browser by default

How it works

The middle value of clamp() is a straight line: it equals your minimum at the minimum viewport and your maximum at the maximum viewport. Outside that range the value stays fixed.

Generated CSS

font-size: clamp(1rem, 0.8043rem + 0.8696vw, 1.5rem);

Just the value, for a custom property or Tailwind:

Usage example

.element {
  font-size: clamp(1rem, 0.8043rem + 0.8696vw, 1.5rem);
}

Live preview

320px1920px

The coloured band shows where the value scales (360px to 1280px).

Computed font-size: 19.55px (1.222rem)

Fluid text

  • Correct in rem and em

    The maths is done in px and converted back, so rem values scale exactly between your two breakpoints.

  • Live preview

    Drag the screen-width slider to see the exact computed size for font size, spacing, width and more.

  • Copy or download

    Copy the full declaration, just the clamp() value, or download a ready-to-use .css file.

Fluid sizes with CSS clamp()

clamp(MIN, PREFERRED, MAX) lets a value grow with the screen while never going below MIN or above MAX. With a preferred value like 0.8rem + 0.9vw, text and spacing scale smoothly from a 360px phone to a wide monitor — no breakpoints needed.

How to use it

  1. Choose the CSS property and unit (rem is best for font sizes).
  2. Enter the smallest and largest value you want.
  3. Set the screen widths where scaling should start and stop.
  4. Drag the preview slider to check the result, then copy the CSS.

The formula

slope = (max − min) ÷ (maxViewport − minViewport), intercept = min − slope × minViewport. The preferred value is intercept + slope × 100vw. For rem and em the sizes are converted to px using the root font size first, because vw is always measured in px.

Tips

  • Use rem for font sizes. Because the preferred value keeps a rem part, text still grows when people zoom in, which helps with accessibility (WCAG 1.4.4 Resize Text).
  • Keep the ratio between max and min modest (for body text, around 1.25×) so text stays readable.
  • Percent units aren't offered because a percentage depends on the parent element, so there's no single correct conversion to vw.

Private by design. Everything runs in your browser — nothing you enter is uploaded or stored by AISeekho.

More free tools