Skip to content
Calculator Tools
Web Development Calculators

CSS Clamp Calculator

Build a fluid clamp() value that scales smoothly between two viewport widths.

Enter values

Results update as you type.

Result

CSS

clamp(1rem, 0.6667rem + 1.6667vw, 2rem)

Keeping a rem term in the preferred value means the text still responds when a reader zooms — a pure vw value would not.

In pixels
clamp(16px, 10.667px + 1.6667vw, 32px)
Growth rate
1.6667vw — 1.667px per 100px of viewport
Size at 375px
16.92 px
Size at 768px
23.47 px
Size at 1440px
32 px

Rendered size by viewport

ViewportSize
320px16px
480px18.67px
640px21.33px
768px23.47px
1024px27.73px
1280px32px
1920px32px

About the CSS Clamp Calculator

The clamp() function takes a minimum, a preferred value and a maximum. Making the preferred value a linear function of the viewport width gives type and spacing that scale smoothly between two breakpoints and then stop — no media queries needed.

Also known as: fluid typography calculator, clamp css generator, responsive font size, fluid type scale.

How to use this calculator

  1. Enter minimum size, maximum size, at viewport width, up to viewport width and the other fields.
  2. The result updates instantly as you type — press Calculate (or Enter) at any time.
  3. Review the breakdown shown under the main result.
  4. Use Copy result or Share to save the answer or send a link with your inputs.

Formula

preferred = intercept + slope × viewport, clamped between the minimum and maximum

Worked example

Using the values pre-filled in the calculator above:

  • Minimum size = 16 px
  • Maximum size = 32 px
  • At viewport width = 320 px
  • Up to viewport width = 1,280 px
  • Root font size = 16 px

the calculator returns:

  • CSS: clamp(1rem, 0.6667rem + 1.6667vw, 2rem)
  • In pixels: clamp(16px, 10.667px + 1.6667vw, 32px)
  • Growth rate: 1.6667vw — 1.667px per 100px of viewport
  • Size at 375px: 16.92 px