CSS Clamp Generator and PX to REM
Set the smallest and largest size and the screen widths they apply between, and copy a clamp() value that scales smoothly in between. A slider previews the result.
Where it stops shrinking.
Where it stops growing.
Usually 16.
Write the size in
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);The size is 20 px here.
The quick brown fox
24 px is 1.5rem. 24 rem is 384px.
Questions
What does clamp() do?
clamp(min, preferred, max) gives a value that follows the preferred expression but never goes below the minimum or above the maximum. With a viewport-based preferred value, text and spacing grow smoothly with the screen.
How is the middle part calculated?
The tool draws a straight line between your two points (the smallest size at the smaller screen width, the largest size at the larger one). The slope becomes the vw part and the point where the line crosses zero becomes the fixed part.
Should I use rem or px?
Use rem for font sizes, so the text still respects a visitor's browser font setting. The fixed part is converted using the root font size you give, which is normally 16 px.
Can the value get smaller as the screen gets wider?
Yes. Enter a larger first size than the second, and the tool swaps the ends of clamp() for you and subtracts the viewport part.
Does it work for spacing and widths too?
Yes. Change the CSS property name to padding, margin, gap or anything that takes a length, and copy the line.
More free tools
- Color ConverterConvert any colour between HEX, RGB, HSL and OKLCH, with a contrast check.
- QR Code GeneratorQR codes for links, Wi-Fi, WhatsApp and more, in your colours, with a logo in the centre.
- Favicon and App Icon GeneratorEvery favicon and app icon size from one logo, with the manifest and the HTML to paste in.
Made by Bulb Studio, a design and development studio in Kolkata.