CSS clamp() Calculator

Make font sizes and spacing scale smoothly between two screen widths. Set the min and max size, preview it at any width, and copy the clamp() value in rem or px.

Preview

Simulated screen width900px

Fluid heading

47.8px at 900px wide

Code

font-size: clamp(2rem, 1.2958rem + 3.0047vw, 4rem);

Settings

Min sizepxMax sizepxMin screen widthpxMax screen widthpx

Output unit

Root font sizepx

The size stays at the min below 375px, grows in a straight line, and stops at the max above 1440px. rem output respects the visitor's browser font size setting.