A fluid heading
With 18px at 360px and 48px at 1280px, the middle of the range is 33px at 820px. Below the start it stays 18px; above the end it stays 48px.
Define two endpoints
Start and end sizes may grow or shrink. Widths must increase. Rem output assumes the entered root size; changing browser or document root size shifts both bounds and the viewport points where they are reached.
Fluid size preview
At 820px viewport33px
Bounds18–48px
Fluid text preview
Linear slope: 0.0326087 px per viewport px. Intercept: 6.26087px. The preferred value is bounded by the smaller and larger endpoint sizes.
| Viewport | Computed size |
|---|---|
| 360px | 18px |
| 820px | 33px |
| 1280px | 48px |
Inputs and previews are processed locally in your browser. No external color or design API is used.
How to use the CSS Clamp Calculator
- 01
Enter a starting viewport width and the desired pixel size there.
- 02
Enter a larger ending viewport width and its desired size. The size may increase or decrease.
- 03
Set the root font size assumed when converting pixel bounds to rem.
- 04
Move the simulated viewport, inspect the endpoint table, and export the CSS.
Examples
Less spacing on larger screens
The Shrinking spacing preset moves from 48px down to 20px. Its vw coefficient is negative while clamp still lists the lower numeric bound first.
How the expression is calculated
The slope is the change in size divided by the change in viewport width. Subtract slope times the starting width from the starting size to obtain the intercept. Multiply the slope by 100 for vw, convert the intercept and bounds to rem, and place the preferred expression inside clamp.
Root size is an assumption
A rem depends on the computed font size of the document root. The pixel endpoints match when the actual root size equals the entered assumption. A different root size changes the bounds and transition points. Test text zoom, larger default fonts, and the destination layout rather than assuming one expression settles responsive accessibility.
Common questions
Can the start and end widths be equal?
No. Equal widths would make the interpolation slope undefined. The end width must be strictly larger.
Can both endpoint sizes be equal?
Yes. The result is constant across the range, with a zero vw coefficient.
Can I use the result for padding or gap?
Yes. The generated expression is a length value. Replace font-size in the export with a length-accepting property such as padding or gap, after checking your layout.