loot.tools

CSS Clamp Generator

Generate a single CSS clamp() value for fluid type and spacing. Set the size you want at a small screen and a large screen, plus the viewport widths to scale between, and it builds a clamp(min, rem + vw, max) value that grows smoothly across that range and locks to your min and max outside it. No media queries, no JavaScript. A preview table shows the rendered size at common viewport widths so you can sanity-check the curve.
Design

Build a single CSS clamp() value that scales a font size (or any length) smoothly between two screen widths. No media queries, no JavaScript. The size locks to your min and max outside the viewport range.

CSS value
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
Rendered size by viewport width
ViewportSizerem
320px16px1rem
480px17.3333px1.0833rem
768px19.7333px1.2333rem
1024px21.8667px1.3667rem
1280px24px1.5rem
1440px24px1.5rem

What clamp() does

clamp(min, preferred, max) picks the preferred value but never lets it drop below the min or rise above the max. Pair it with a vw-based preferred term and a font size grows with the viewport, then stops at sensible bounds. That replaces a stack of media-query breakpoints with one line of CSS.

How to use it

Enter the size you want at your smallest screen and at your largest, then the two viewport widths to scale between (320px and 1280px are common). The tool fits a line between those points and writes it as rem + vw. Copy the value or the full font-size declaration. Change the root font size if your project sets <html> to something other than 16px.

Reading the preview

  • The table shows the actual rendered size at several viewport widths
  • Below your min viewport the size holds at the minimum, above your max viewport it holds at the maximum, and in between it scales linearly
  • Works for any length, not just font size: padding, margins, gaps, and border radius all take a clamp() value
  • Everything runs in your browser