Developer Tools New Tool

Free Online CSS Clamp Calculator for Fluid Type

Give a smallest size, a largest size, and the viewport width at each end. The tool solves the straight line between them and writes clamp with a preferred value in rem plus vw, so browser zoom keeps working. The arithmetic is shown step by step, with a chart of the size across widths.

Free Forever Nothing Uploaded Shows the working Runs in your browser

Free Online CSS Clamp Calculator for Fluid Type

Advertisement Slot (Top Banner) Google AdSense Unit • Responsive Banner

CSS Clamp Generator Everything happens in this tab. Nothing you paste is sent anywhere.

The working

The quick brown fox jumps over the lazy dog. Resize the window to see this move.

CSS

Sizes Enter sizes in Smallest Largest Root font size px

Viewport range Narrow screen px Wide screen px Property

Presets

Buy Us A Coffee

Enjoying WizTools123? Help keep our server infrastructure 100% free and open for everyone.

Buy Us A Coffee

Sponsored Content (Below Tool) Google AdSense Placement

How to Work Out a CSS Clamp Value

A few steps, and nothing is uploaded.

Set the two sizes The smallest size is what you want on a narrow phone, the largest is what you want on a wide desktop. Enter them in px or in rem, with the root font size alongside so the conversion is honest.

Set the two widths Give the viewport width where the smallest size should be reached, and the width where the largest should be reached. Between those two the size moves in a straight line; outside them it is held flat.

Read the working The slope, the vw coefficient and the rem intercept are all shown. That is the whole of the arithmetic, and it is worth a look because the numbers explain why the rule has the shape it does.

Copy the rule The output is a single declaration on the property you picked. The chart shows the size across widths, so you can check the flat ends are where you expect before you use it.

What to Know About clamp and Fluid Sizes

Including the accessibility reason for the rem term.

A preferred value made only of vw breaks browser zoom. Text scaling and page zoom work by changing the root font size, and a vw unit does not care about that, so font-size: clamp(1rem, 4vw, 2rem) can leave a reader stuck with text that will not grow. Including a rem term in the preferred value means part of the size still follows the root, so zoom has something to act on. This tool always writes the rem term, which is why the preferred value looks like 0.6964rem + 1.3393vw rather than a bare vw figure.

The min and max are the values at your two widths, not limits you invent. clamp holds the smallest size below the narrow width and the largest above the wide width, and interpolates between. If you pick 360px and 1280px, the size hits exactly your two numbers at exactly those widths. Widening that range makes the change gentler; narrowing it makes the type jump about as the window resizes.

The min and max are written in rem on purpose. A clamp whose ends are in px pins the size regardless of the user setting a larger default font, which is the same accessibility problem in a different place. The sizes are converted using the root font size you give, so if your page sets a root other than 16px you should change that field or the numbers will be wrong.

This is arithmetic, not layout advice, and it cannot see your page. The tool does not know your container width, your font metrics or your line length, and vw is the viewport width rather than the width of the element, so a clamp tuned on a full width hero will be too large inside a narrow column. Check the result in place, and for element based scaling look at container query units instead.

Key Features & Capabilities

What this tool does, and what it deliberately does not.

The maths, shown Slope, vw coefficient and rem intercept, each on its own line.

Keeps zoom working The preferred value always carries a rem term, never vw alone.

A chart of the result Shows the flat ends and the sloped middle across screen widths.

px or rem input Enter sizes in either, with a configurable root font size.

Any property font-size, padding, margin, gap or radius, on one declaration.

Runs in your browser Nothing is sent anywhere. The page works with the network off.

About the CSS Clamp Generator

Fluid sizing replaces a stack of media queries with one declaration. The idea is simple: below a narrow width hold a small size, above a wide width hold a large one, and move smoothly between. CSS has exactly the function for it in clamp(), but the middle argument has to be solved rather than guessed, and that is where people give up and go back to breakpoints.

The working is the straight line through two points. The slope is the change in size divided by the change in viewport width, the vw coefficient is that slope as a percentage, and the rem intercept is what is left when the vw part is taken away at the narrow end. This page shows all three, because a generator that hands over a mystery number teaches you nothing and cannot be checked.

The rem term is not decoration. A preferred value of pure vw ignores the root font size, so a reader who has increased their default text size, or who zooms the page, may find the type refuses to grow. Keeping a rem component leaves the size partly under the user control, which is why every rule this page writes has one, and why the ends of the clamp are converted to rem as well.

Frequently Asked Questions

Zoom, rem versus px, and where clamp is worth using.

Because vw is a fraction of the viewport and takes no notice of the root font size, a preferred value made only of vw can stop text responding to browser zoom or to a larger default font. Splitting the preferred value into a rem part and a vw part keeps some of the size under the user control. The rule is slightly longer to read and considerably kinder to use.

A common pair is 360px for a small phone and 1280px or 1440px for a desktop. Keep the range wide enough that the change is gradual, because a narrow range makes the size snap as the window resizes. There is no correct answer, but the two widths should be sizes your design is actually tested at.

Yes, and it is often more useful there. Section padding that moves from 24px to 96px removes a great deal of breakpoint juggling. The same arithmetic applies, so pick the property in the control above and the declaration comes out on that property with the same solved preferred value.

Change the root font size field, because every rem figure in the output is divided by it. If your stylesheet sets html to 62.5% for the old 1rem equals 10px trick, put 10 in that field. Leaving it at 16 while your root is something else gives a rule that is quietly wrong at both ends.

They solve different problems. clamp with vw scales with the viewport, so a component in a narrow sidebar gets the same size as the same component in a wide main column. If the size needs to follow the element rather than the window, container query units are the right tool. clamp is still the simpler choice for page level type and spacing.