CSS Clamp Generator
Generate responsive CSS clamp() values from viewport ranges, value ranges, units, and root font size.
Build a fluid clamp() expression from a minimum viewport, maximum viewport, minimum value, and maximum value. Use it for responsive typography or spacing, preview the result locally, and copy either a full CSS declaration or the value only.
Used for rem output.
Preview text uses the generated clamp() value.
How it works
Viewport range sets the browser widths where the fluid value starts and stops changing. Below the minimum width, CSS uses the minimum value. Above the maximum width, CSS uses the maximum value.
Value range sets the lower and upper size for the generated CSS. The maximum viewport and maximum value must be greater than their minimums.
Value unit switches the generated minimum, preferred intercept, and maximum between rem and px. When using rem, set Root font size to the pixel value used by your target page so the vw term reaches the requested endpoints.
The preferred term uses vw because it scales with viewport width. Root font size does not change the visible rem endpoints; it only keeps the viewport-based middle term aligned with them.
Output controls whether the result is a full declaration for the selected property or only the clamp() expression. Check generated values in your target layout because font settings, root font size, and container constraints can change the final appearance.
Your inputs stay in the browser. Do not paste sensitive design system values into any web tool unless you trust the device and page context you are using.
