CSS Clamp
Generate responsive CSS clamp() values for fluid typography
About this calculator
The CSS Clamp Calculator generates a fluid clamp(min, preferred, max) expression that scales a value linearly between two viewport widths. Give it the minimum and maximum value (rem or px) and the viewport range, and it derives the vw slope and intercept of the line through both points, plus the computed values at each breakpoint as a sanity check. A 16px root font size is assumed for rem. Inverted ranges return validation errors. Ideal for fluid typography and spacing.
How to use the CSS Clamp tool
- Enter or paste your input into the field.
- Read the output — it updates instantly as you type.
- Adjust the options, if any, to fit your use case.
- Copy the page URL to share the exact result.
Common examples
- 1rem at 320px → 2rem at 1280px → clamp(1rem, 1.6667vw + 0.6667rem, 2rem)
- 1.25rem at 375px → 3rem at 1440px → clamp(1.25rem, 2.6291vw + 0.6338rem, 3rem)
- 16px at 320px → 32px at 1200px → clamp(16px, 1.8182vw + 10.1818px, 32px)
Frequently asked questions
How does the CSS Clamp tool work?
Enter or paste your input and the tool processes it directly in your browser, showing the result immediately. Nothing you type is uploaded to a server — the entire computation happens on your device.
When would I use the CSS Clamp tool?
It is handy for development, debugging, design and administration tasks — whenever you need this transformation or check done quickly without installing anything or trusting a third-party service with your data.
How reliable are the results?
The tool implements the relevant standard or specification directly, so its output matches what compliant software produces. Edge cases such as empty or malformed input are reported clearly instead of failing silently.
Can I share a specific result with someone else?
Yes. Your input updates the URL, so copying the address bar and sharing the link reopens the tool in the same state for whoever clicks it.