CSS Clamp Calculator
Create one fluid CSS value from two viewport-and-size pairs. Use it for typography or spacing that grows or shrinks between your chosen breakpoints, with lower and upper size bounds outside that interval.
Local processing · No account required · Copy and export
Workspace
Ready to useHow to use CSS Clamp Calculator
- Set the smaller and larger viewport widths in pixels. Enter the desired size at each viewport; the second size may be smaller.
- Set the root font size used for rem conversion and choose a CSS property. Presets provide a quick starting point.
- Inspect the endpoint and midpoint examples. Copy the clamp declaration or download it, then test zoom and the actual root font size in your layout.
When to use this tool
Make a heading or spacing value scale between two viewport sizes without abrupt breakpoint jumps. Check the result at both endpoints and with browser text zoom.
The preferred value is a line between two endpoints
The calculation finds a vw slope and a rem intercept from your viewport/size pairs. clamp() then limits that preferred value between the smaller and larger endpoint sizes. A decreasing design uses a negative vw coefficient; the minimum and maximum clamp bounds still stay in ascending order. The root-size input assumes a fixed pixel-to-rem relationship during calculation.
Worked example
Viewports: 320px → 1440px
Sizes: 16px → 32px; root: 16px
font-size: clamp(1rem, 0.7143rem + 1.4286vw, 2rem);Limits and output checks
Viewport widths must be positive and increasing. Endpoint sizes must be nonnegative. Actual computed sizes depend on the root font size and CSS environment. Fluid type still needs readable minimum sizes and zoom testing; using rem does not automatically establish accessibility.
Reference: CSS clamp() reference.
Frequently asked questions
Can the size decrease on wider screens?
Yes. Give the larger viewport a smaller target size. The preferred expression uses a negative vw term, with correctly ordered clamp bounds.
Can I use this for spacing?
Yes. Choose an appropriate property such as padding, gap or margin and review the result in your layout. This calculator uses nonnegative endpoint sizes.
Why does the result differ after changing the root font size?
The rem terms are interpreted by the browser using the actual root font size. A different root size changes the computed values from the original pixel assumptions.