⇔

CSS Clamp() Generator

Create a CSS clamp() expression that scales smoothly between two viewport widths — perfect for fluid responsive type and spacing.

Min viewport (px)Max viewport (px)Root font size (px)Min size (px)Max size (px)

font-size: clamp(1.000rem, 0.8043rem + 0.8696vw, 1.500rem);

Fluidly scales a value between the two viewport widths — perfect for responsive typography and spacing.

🔒 This tool runs entirely in your browser. Your data is never uploaded.

Frequently asked questions

What does clamp() do?＋

It sets a value that scales fluidly between a minimum and maximum based on viewport width, so type and spacing resize smoothly without media queries.

What inputs do I provide?＋

Your minimum and maximum sizes and the viewport range; the tool computes the preferred middle value for you.

Is clamp() well supported?＋

Yes — it works in all modern browsers.