CSS Clamp Generator

A clamp value lets a size grow smoothly with the screen between a minimum and a maximum, with no media queries. Enter the smallest and largest sizes and the screen widths they belong to, and this tool works out the preferred value and writes the whole clamp() line in rem and viewport units.

How to use it

1. Enter the smallest and largest size in pixels.
2. Enter the screen widths where each applies.
3. Set the root font size, usually 16.
4. Copy the clamp line.

When it helps

• Fluid headings that scale between phone and desktop.
• Responsive padding and margins.
• Cutting down on breakpoints.
• Matching a design that changes size across screens.

Good to know

• Using rem for the limits respects a reader's font-size settings.
• Check the result at your smallest and largest widths.
• It works for any length, not just font-size.

How the formula works

Between the two screen widths, the size grows in a straight line. The tool works out the slope, the change in size divided by the change in width, and the intercept, then writes the middle value as a rem amount plus a number of viewport width units. The clamp function limits it to the minimum and maximum.

So for 16px to 40px between 360px and 1280px, the preferred value is about 0.43rem plus 2.61vw.

Worked example: fluid headings

Set the small size to 28, the large to 56, with screen widths of 360 and 1280. Copy the result into your heading style, and the heading scales smoothly from 28 pixels on a small phone to 56 on a desktop, without any media queries.

Do the same with padding and margins for a layout that adapts.

Accessibility considerations

Because the preferred value uses viewport units, it doesn't respond to a user's font-size settings on its own. Using rem for the minimum and maximum, and including a rem part in the preferred value, as the tool does, keeps zoom working.

Test by zooming the page to 200 percent, to make sure text remains readable and doesn't overflow.

Beyond font sizes

Clamp works for any length: padding, margins, gaps, widths, even border radii. A section's vertical padding might be clamp(2rem, 5vw, 6rem), so it breathes on large screens without wasting space on phones.

Using the same clamp for related spacing keeps proportions consistent as the viewport changes.

Testing fluid sizes

Open your page and drag the window from narrow to wide, watching the size change smoothly. Check the extremes: at 320 pixels wide the minimum should still be readable, and on a very wide monitor the maximum shouldn't look huge.

Browsers' responsive design mode makes this quick.

Questions