CSS clamp() generator
Say how big a font or spacing should be on a small screen and on a large one, and get the clamp() that scales smoothly in between. Move the slider to check the size at any width.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Choose whether you think in px or rem.
- Enter the smallest and largest size, and the viewport widths where each should apply, for example 320 and 1280.
- Copy the declaration, for example
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);.
- Drag the preview slider to see the size at other widths.
How it works
With sizes and widths in pixels, slope = (max − min) ÷ (maxVp − minVp) and intercept = min − slope × minVp. The middle value is intercept + slope × 100vw. Pixel values are divided by the root font size to get rem, and numbers are rounded to four decimals.
Example
For 16px at 320px and 24px at 1280px, slope = 8 ÷ 960 = 0.008333, so 0.8333vw. Intercept = 16 − 0.008333 × 320 = 13.3333px, which is 0.8333rem. The result is clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem).
Tips
- Viewport width is measured without the scrollbar in some browsers, so results differ by a few pixels at the ends.
- Check that large text still passes your accessibility requirements when the user zooms.
Frequently asked questions
How does the formula work?
The size grows in a straight line from the minimum at the small viewport to the maximum at the large one. The slope is (max − min) ÷ (max width − min width), written as vw, and the intercept is min − slope × min width, written in rem. clamp() then stops the line at the minimum and the maximum.
Why are rem and vw combined?
A pure vw size ignores the font size the user chose in the browser, so text would not respond to zoom settings. The rem part keeps that link. The root font size field tells the tool how many pixels one rem is; browsers default to 16.
What if the minimum is larger than the maximum?
The size then shrinks as the screen grows. The generator puts the smaller value first, as clamp() requires, and the line still passes through the two points you gave.
Can I use it for things other than font size?
Yes. Edit the property name to padding, margin, gap, width or any other length property.
Is clamp() supported in browsers?
It is supported in all current major browsers. If you must support very old ones, put a plain fixed size on the line before as a fallback.