CSS Clamp Generator
Generate fluid clamp() CSS that scales any value smoothly between two viewport widths — with live preview.
This tool runs 100% in your browser. Your data is never uploaded, stored, or logged.
Generated clamp()
Live preview — resize your window
The nimble brown fox
About this tool
clamp() lets one line of CSS scale typography (or spacing) smoothly from phone to desktop — once you've done the slope math. This generator does it for you: set the minimum and maximum size plus the viewport range, and get a precise clamp() expression in rem or px.
A live preview text resizes with your window so you can feel the result before shipping it.
How to use it
- Enter min/max sizes in px and the viewport range they map to.
- Choose rem (recommended for accessibility) or px output.
- Copy the generated clamp() — it works for font-size, padding, gap, anything.
- Resize your browser to watch the live preview scale.
Useful ways to apply it
- Fluid headings that never need media-query breakpoints.
- Responsive section padding that scales with the screen.
- Consistent type scaling across a design system.
- Replacing stacks of font-size media queries with one line.
Frequently asked questions
How is the middle value calculated?
Linear interpolation: slope = (max−min)/(vmax−vmin), then intercept + slope×100vw. The clamp bounds guarantee you never go below min or above max.
Why prefer rem output?
rem respects the user's browser font-size setting, keeping fluid type accessible. The vw component is unaffected either way.
Can I use this for spacing, not just text?
Absolutely — the expression is valid for any length property: padding, margin, gap, border-radius and more.
Privacy
This tool runs 100% in your browser. Your data is never uploaded, stored, or logged.