CSS tool
Pick min and max sizes, the viewports they belong to, and copy a fluid clamp(). Preview scales with a simulated width. It all stays on your device.
Like the tool? Find a bug?Share with usPreview
1.0609rem · 16.97px
Html69
Fluid range
Property
Fluid unit
Advanced
Wrap
Precision
font-size: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
text-[clamp(1rem,0.9565rem+0.2174vw,1.125rem)]
clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem)
Guide
01
Size grows on a straight line between two viewports. CSS clamp(min, preferred, max) keeps that line from dropping below the min or rising past the max.
02
Type, Heading, Space, and Width are starting points. Sample loads a round heading rule. Paste an existing clamp() to reverse it onto the sliders.
03
vw tracks the layout viewport. svw / dvw / lvw pick a viewport type. cqi and cqmin track a container — pair them with container-type: inline-size.
Use it
Use CSS for stylesheets and inline style. Wrap as a custom property or a selector rule when you are wiring a token or a class. Type exact viewport numbers, switch em for component-scoped type, wrap the preferred term in calc() if a linter wants it, and drop precision to 2 for shorter output. Nothing leaves the browser.
FAQ
Rem scales with the root font size, so user zoom and browser defaults still apply. Switch to px when you need a fixed canvas or you are matching a design file. Root defaults to 16px.
Yes. Paste a declaration, a Tailwind arbitrary class, or just the clamp(). Min, preferred, and max map back onto viewport and size sliders when the preferred term is a length plus a fluid unit.
Paste is capped at 50,000 characters so a huge dump cannot freeze the tab.
No. Math, preview, and copy happen in your browser tab. There is no account and no API call.