About the CSS Clamp Generator
The CSS clamp() function lets a size grow smoothly with the width of the screen, without media queries. You give it a minimum, a preferred value and a maximum. Working out the preferred value by hand means some algebra with viewport units. Enter the smallest and largest size, the screen widths where they should apply and your root font size, and this generator writes the clamp() expression in rem units, which respect the visitor's font settings. It also shows what size you will get at common widths such as 375, 768, 1280 and 1920 pixels so you can check it. Use it for headings, body text, padding or gaps. It runs in your browser.
Updated October 2026
How to use the CSS Clamp Generator
- 1Choose whether you think in pixels or rem.
- 2Enter the smallest and largest size you want.
- 3Enter the screen widths where those sizes apply, such as 320 and 1280.
- 4Keep the browser base size at 16 unless you changed it.
- 5Copy the clamp() value into your CSS.
The idea behind fluid sizes
Instead of setting a different font size at each breakpoint, you describe the size at two screen widths and let the browser fill in the rest. At 320 pixels a heading might be 24 pixels, and at 1280 pixels it might be 40. In between, the size grows in a straight line, so there are no sudden jumps.
Outside the two widths, the minimum and maximum take over, which prevents tiny text on small phones and huge text on wide monitors.
Good habits
- Always test with the browser zoom and text size set larger.
- Do not make body text smaller than 16 pixels on phones.
- Keep the ratio between maximum and minimum below about 2.5 for readable text.
- Use the same widths across your whole design so sizes stay in step.
- Pair a fluid heading with a fluid line height, or use a unitless line height.
Related tools
To convert between units use the PX to REM Converter, and for gradients and layouts try the CSS Gradient Generator and the CSS Grid Generator. Check how text looks at different screens with the Screen Size Checker, and keep contrast readable with the Color Contrast Checker.
Features
- Pixels or rem input
- Output in rem for accessibility
- Preferred value with vw worked out for you
- Sizes shown at common screen widths
- Works for fonts, padding, margins and gaps
- Checks for impossible widths
- Free, no sign-up
Frequently asked questions
What does clamp() do?
clamp(min, preferred, max) picks the preferred value but never goes below the minimum or above the maximum. With a vw-based preferred value, the size scales with the screen.
How is the middle value calculated?
It is a straight line through two points: the smallest size at the smallest width, and the largest size at the largest width. The line is written as a rem offset plus a number of vw.
Why use rem in the result?
If a visitor enlarges their browser's text size, rem values scale with it. Pure px or vw values would ignore that setting, which hurts accessibility.
Can I use it for padding or width?
Yes. clamp() works for any length property, such as padding, margin, gap and width.
Which widths should I choose?
Many designs use 320 or 375 pixels as the smallest and 1280 to 1440 as the largest. Choose the widths where your design really stops growing.
Does clamp() work in all browsers?
It has been supported in all current browsers since 2020. Very old browsers ignore the line, so add a plain fallback before it if you need one.
What if my minimum is bigger than my maximum?
That still works: the tool swaps them in the clamp() so the order is valid, and the size shrinks as the screen grows.