CSS clamp() generator — fluid font sizes and spacing between two breakpoints

How to use the CSS clamp generator

1. Enter the Minimum size and Maximum size in px, for example 16 and 24.
2. Enter At viewport width (where the minimum applies) and Up to viewport width (where the maximum is reached), for example 320 and 1280.
3. Choose the Output unit, rem or px. For rem, check the Root font size (default 16 px).
4. Set the CSS property. The default is font-size.
5. Copy the declaration, and check the Value at common widths table.

What it does and when to use it

Fluid sizing replaces a ladder of media queries with one line. A heading can grow from 16 px on a small phone to 24 px on a laptop, then stop. Use it for headings, text, padding and gaps.

Build a full type scale with the CSS typography generator. For breakpoint-based rules you still need, use the media query generator. To compare rem, vw and other units, look them up in the CSS units reference.

How it works

The size is a straight line between two points (viewport width, size):

slope     = (maxSize − minSize) / (maxVw − minVw)
intercept = minSize − slope × minVw
preferred = intercept + slope × 100 vw

The intercept is converted to rem by dividing by the root font size (in rem mode), and the slope is shown as vw. clamp() then holds the result between the smaller and the larger size. All numbers are rounded to 4 decimal places. If the second width is not larger than the first, you get the error The second viewport width must be larger than the first. Everything is calculated in your browser.

Worked examples

16 px at 320 px wide, growing to 24 px at 1280 px, in rem:

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

375px | 16.46px
768px | 19.73px
1024px | 21.87px
1440px | 24px

Spacing in px, 32 to 64 px between 400 and 1200 px wide:

margin-block: clamp(32px, 16px + 4vw, 64px);

Shrinking padding, 48 px on phones down to 28 px on wide screens (375 to 1440 px):

padding-inline: clamp(1.75rem, 3.4401rem - 1.8779vw, 3rem);

Limits and tips

• The table assumes your root size. It shows pixels for a root font size equal to the one you entered.
• Steep slopes can block zoom. If most of the size comes from vw, zooming the page barely changes the text. Keep the range modest for body text.
• Viewport means the whole window. For sizes based on a component’s width, swap vw for container query units (cqi) by hand.