CSS clamp() calculator
Make fluid font sizes and spacing that grow smoothly with the screen. Copy the CSS, Tailwind class or a full type scale.
font-size: clamp(1rem, 0.8043rem + 0.8696vw, 1.5rem);
The quick brown fox jumps over the lazy dog
The preview simulates the screen width with the slider. Resize your browser to see the real CSS in action.
Make fluid CSS in three steps
- STEP 1
Set the sizes
Enter the smallest and largest size, and the screen widths where it should start and stop growing.
- STEP 2
Check the preview
Drag the screen-width slider to see the exact size at any width, with a live chart.
- STEP 3
Copy the CSS
Copy the clamp() value as a CSS declaration, a variable or a Tailwind class, or a whole fluid type scale.
How does CSS clamp() work?
clamp(MIN, PREFERRED, MAX) picks the preferred value but never goes below the minimum or above the maximum. For fluid sizing, the preferred value mixes rem and vw (like 0.8rem + 0.9vw), so the size grows in a straight line between two screen widths and stops at the limits. Using rem for the minimum and maximum keeps the size responsive to the user's browser font setting.
CSS clamp() calculator FAQ
By using this tool you agree to its Terms of Use and privacy notice.
A size that grows smoothly with the screen width instead of jumping at breakpoints. One clamp() line replaces several media queries.
Use rem. It respects the font size people set in their browser, which matters for accessibility. Choose px only if your project uses px everywhere.
A common range is 360px (small phones) to 1280px or 1440px (laptops). Below and above that range the size stays at its minimum or maximum.
A set of font sizes (body, h6 to h1) where each step is the previous one times a ratio, like 1.25. The ratio can be smaller on phones and bigger on desktops, so headings grow more than body text.
Yes, all modern browsers support clamp(), including Chrome, Safari, Firefox and Edge.
Yes. Paste the clamp() value into any size field in Webflow's style panel (type it in the field), or add it as a variable in Webflow's Variables panel.
Related free tools
People also search for
- CSS clamp calculator
- fluid typography calculator
- clamp font size generator
- fluid type scale
- responsive font size CSS
- clamp() rem vw
- Tailwind clamp
- Webflow clamp font size
- fluid spacing calculator
Questions about the CSS clamp() calculator?
Stuck, found a bug, or have an idea to make it better? Send a message and we'll reply within 1–2 working days.
- Email us at pketu916@gmail.com
- Saw this tool used to deceive or harm someone? Choose Report misuse as the topic.
- Read the Terms of Use and Privacy notice for this tool.