CSS clamp() Calculator

Generate a responsive clamp() font-size from min/max viewport and sizes

Generate a responsive clamp() expression for fluid typography. Enter the min/max viewport widths and font sizes and get copy-ready CSS with a live preview. Everything runs in your browser.

Min viewport (px)

Max viewport (px)

Min size (px)

Max size (px)

Root font (px)

font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);

Scales from 16px at a 320px viewport up to 24px at 1280px, clamped outside that range.

The quick brown fox resizes with the viewport.

Resize the window to see the fluid size change.

Related Tools

Box-Shadow Generator Build CSS box-shadows visually with layered shadows cubic-bezier() Editor Drag a curve to build a CSS easing function Border-Radius Generator Round corners visually and copy the CSS Flexbox & Grid Playground Build Flexbox and CSS Grid layouts visually

Get weekly dev tools and tips