CSS clamp() Calculator
Set a minimum size, a maximum size, and the viewport range they apply to. This tool works out the linear interpolation for you and gives you a ready-to-use clamp() value.
The quick brown fox jumps over the lazy dog.
font-size: clamp(1rem, ...);
How to use it
- Enter the smallest size you want (at your smallest supported viewport).
- Enter the largest size you want (at your largest supported viewport).
- Set the viewport widths those two sizes correspond to.
- Copy the generated
clamp()line into your CSS.
How it works
The calculator finds the straight line between your two (viewport, size) points, then expresses that line as rem + vw so it renders identically to a real CSS engine. The min and max in the clamp() call are your two boundary sizes, converted to rem using the root font size you set.
Limitations
This assumes a linear relationship between viewport and size, which is what clamp() itself does — it won't produce eased or stepped scaling. It also assumes your root font size doesn't change at different breakpoints; if it does, the rem-based output will be slightly off.
Frequently asked questions
- What does CSS clamp() actually do?
- clamp(min, preferred, max) picks the preferred value, but never lets it go below min or above max. It's most often used to scale font size or spacing smoothly with the viewport, without a set of fixed breakpoints.
- Why does the preferred value use rem and vw together?
- The vw part makes the size scale with the viewport; the rem part is a fixed offset so the math works out to your exact min and max at the two ends of the range. Mixing them is what makes the curve linear between those two points.
- Does this replace media queries entirely?
- No. clamp() is great for values that should scale smoothly, like type size or padding. Layout changes, like switching from one column to three, still need a media query.
- Why rem instead of px in the output?
- rem respects a user's browser font-size setting, which px ignores. This calculator assumes a 16px root font size unless you change it below.