CSS clamp calculator
Fluid type/spacing: clamp(min, preferred, max) from viewport range.
Runs in this tab. The file stays here.
Fluid type sample
font-size: clamp(16px, 3.6364vw + 4.3636px, 48px);
This runs in your browser. Nothing is uploaded.
About CSS clamp calculator
Generate a fluid CSS clamp() from minimum, preferred, and maximum sizes across a viewport range.
Fluid type and spacing used to mean a pile of media queries. clamp(min, preferred, max) collapses a lot of that into one declaration when the preferred term is a viewport-relative expression. This page helps you derive that expression from the sizes you actually want at small and large viewports.
Enter the minimum size, maximum size, and the viewport width range where the fluid middle should run. The output is a clamp() you can drop onto font-size, padding, gap, or width — wherever a smooth scale beats hard breakpoints.
Cubic-bezier is for motion easing, not sizing. Flex and grid handle layout. Clamp is the sizing glue between mobile and desktop without a dozen @media blocks for every length.
How to use CSS clamp calculator
- 1Enter min size, max size, and the viewport width range.
- 2Read the generated clamp() expression.
- 3Copy it into your CSS for font-size, spacing, or other lengths.
What it won't do
- Linear preferred term between two viewports — not a multi-breakpoint curve editor.
- You still choose where to apply the result.
Common questions
What units should I use?
Match your design system — rem and px are common. Keep min/max and viewport inputs consistent so the slope makes sense.
Is clamp() supported in modern browsers?
Yes in current evergreen browsers. If you still support very old engines, check your baseline before relying on it alone.
Can I use this for font-size only?
No restriction — clamp works for any CSS length. Font-size is just the most popular search intent.
Related tools
Why this one doesn't upload your file
There is no server to upload to. This page is a static file, and the work happens in your browser using the same graphics and WebAssembly code that renders every other site you visit. Your file is read from disk into memory, processed, and handed back as a download. Once the page has loaded you can disconnect from the network entirely and it keeps working. The longer explanation