Web Tools
CSS Clamp Calculator
Build fluid CSS clamp() values from size and viewport endpoints.
CSS clamp() value
clamp(1rem, 0.833333rem + 0.833333vw, 1.5rem)| Viewport | Calculated size |
|---|---|
| 320px | 16px |
| 800px | 20px |
| 1280px | 24px |
Preferred term: 0.833333rem + 0.833333vw. The minimum and maximum rem bounds use the root font size entered above.
This calculator creates a linear interpolation between two pixel sizes across two viewport widths, then expresses the bounds in rem and the changing part with vw. Test the result in your actual layout and at browser zoom/text settings before shipping it.
About This Tool
CSS clamp() can create a value that grows smoothly with the viewport while staying between explicit minimum and maximum bounds. The difficult part is deriving the linear preferred value so that it reaches the sizes you intended at the viewport widths you chose. This calculator performs that interpolation, converts the bounds to rem using an explicit root font size, and shows endpoint and midpoint checks so the generated expression is easier to verify.
How To Use It
- Enter the minimum and maximum target sizes in pixels.
- Enter the viewport widths where those endpoint sizes should be reached. The maximum viewport must be larger than the minimum viewport.
- Set the root font size used to express the clamp bounds and intercept in rem.
- Copy the generated clamp() value and test it in the real component, including zoom, text scaling, narrow screens and wide screens.
Examples
Fluid body-to-lead text
For 16px at 320px and 24px at 1280px with a 16px root, the generated value grows linearly between those endpoints and remains clamped outside the range.
Fluid spacing
The same interpolation can be used for spacing or other length properties when viewport-driven scaling is appropriate; enter the desired pixel endpoints and test the resulting behavior in context.
Constant value
If the minimum and maximum sizes are equal, the slope is zero. clamp() still works, although a single fixed value may be simpler CSS.
Useful Notes
How the preferred value is derived
The calculator treats viewport width as x and the desired size as y. The slope is (maximum size − minimum size) ÷ (maximum viewport − minimum viewport). Multiplying by 100 expresses the changing portion as a vw coefficient. The intercept is chosen so the line passes through the minimum endpoint.
Why the bounds use rem
Using rem for the minimum and maximum can preserve a relationship with the root font size rather than locking both limits to CSS pixels. The calculator also converts the intercept to rem using the root size you provide. The vw term still makes the preferred value viewport-dependent.
clamp() has three arguments
CSS clamp(minimum, preferred, maximum) chooses the preferred value while constraining it between the minimum and maximum. Here the preferred value is a linear expression combining a rem intercept and a vw term.
Viewport interpolation is not always the right design
A mathematically smooth value can still be poor typography or spacing. Content width, container size, line length, component layout, user zoom and accessibility needs matter. Container queries or discrete breakpoints may be better when the component should respond to its own available space rather than the viewport.
Root font size is an assumption
The px-to-rem conversion depends on the root font size entered. 16px is a common starting value but not a universal guarantee. If your document or user environment resolves the root size differently, the rem portions resolve differently too.
Check accessibility, not only endpoints
For typography, do not treat a generated clamp as an accessibility guarantee. Verify readable sizes, line height, wrapping, zoom behavior and text resizing in the actual interface. Avoid formulas that make important text uncomfortably small on narrow screens.
FAQ
What does the vw number mean?
1vw equals 1% of the viewport width. The calculator derives a vw coefficient from the change in target size across the viewport interval.
Why is there a rem value plus vw in the middle argument?
A pure vw value generally cannot pass through two arbitrary size/viewport endpoints. The rem intercept shifts the line while the vw term supplies its slope.
Does the size stop growing outside my viewport range?
Yes, provided the minimum size is not greater than the maximum. clamp() prevents the preferred value from going below the minimum or above the maximum.
Can I use this for padding and gaps, not just font-size?
Yes, clamp() works with many CSS length properties. Whether viewport-based interpolation is good design depends on the property and layout, so test the result in context.
Is 16px always the correct root font size?
No. It is a common default assumption. Use the root size that matches your page, and remember user settings can affect text sizing behavior.
Related Tools
CSS Unit Converter
Convert relative CSS units with the context that determines their real size.
Heading Hierarchy Checker
Inspect an HTML heading outline and spot skipped levels.
Color Contrast Checker
Check WCAG text contrast ratios for two web colors.
Aspect Ratio Calculator
Simplify dimensions and resize them without changing their proportions.