CSS Clamp() Calculator
NewGenerate a fluid CSS clamp(min, preferred, max) expression from two viewport-width/size breakpoints, for responsive typography and spacing that scales smoothly.
Preview text scales fluidly as you resize the browser window
This calculates the slope and intercept of a linear function between your two viewport/size pairs, then expresses it as clamp(min, preferred, max) where the preferred value uses vw units — so the size scales smoothly between the two breakpoints and is clamped outside that range.
Frequently Asked Questions
What does the generated clamp() expression actually do?
It produces a CSS value that stays fixed at your minimum size below the minimum viewport width, scales smoothly and linearly between your two breakpoints, and stays fixed at your maximum size above the maximum viewport width — all with pure CSS and no media queries or JavaScript.
How is the "preferred" middle value calculated?
The tool solves for the slope and intercept of the straight line connecting your two (viewport width, size) points, then expresses that line as a `vw`-based expression plus a fixed offset, so the value scales exactly linearly between your two chosen breakpoints.
Should I use rem or px for the output?
`rem` is generally recommended for font sizes and spacing because it respects the user's browser font-size preference for accessibility, while `px` can be useful for values that should be pixel-exact regardless of user settings — the tool supports both.
What happens outside my min/max viewport range?
The value is clamped — it simply stops changing and holds steady at the minimum or maximum size once the viewport goes below or above your chosen breakpoints, which is exactly what the CSS `clamp()` function is designed to do.
Do I need a fallback for older browsers?
`clamp()` has been supported in all major browsers since 2020, so a fallback is rarely needed today, but if you must support very old browsers you can add a plain fixed-size declaration before the `clamp()` line as a simple fallback for browsers that don't understand it.