CSS clamp() generator for fluid typography

Generate a fluid CSS clamp() value (responsive typography) between two viewport sizes.

▸Min size (px)▸Max size (px)▸Min viewport (px)▸Max viewport (px)

Fluid preview

▸CSS

🔒 100% client-side — no data sent

Generate a fluid CSS clamp() value from a minimum size, a maximum size and the desired viewport range. Perfect for responsive typography without piling up media queries. The calculation runs in your browser, instantly and locally.

What is it for?

▸ Create a fluid font size between mobile and desktop
▸ Generate responsive spacing without media queries
▸ Scale headings that adapt to screen width
▸ Get a ready-to-copy clamp() value

FAQ

How does the clamp() function work?

clamp() takes a minimum, a preferred and a maximum value, and keeps the result within that range.

Which units should I use?

px or rem for the bounds; the fluid part combines vw and rem.

Is clamp() supported everywhere?

Yes, clamp() is supported by all modern browsers.