Advanced CSS Clamp Generator
Create CSS clamp() values for fluid typography and spacing. Set min and max values with viewport breakpoints and see a live responsive graph. Simulate any viewport width and preview how the value scales. Export in px or rem.
clamp(1.0000rem, 1.6667vw + 0.6667rem, 2.0000rem)/* CSS */
.element {
font-size: clamp(1.0000rem, 1.6667vw + 0.6667rem, 2.0000rem);
}
/* Or as a custom property */
:root {
--fluid-size: clamp(1.0000rem, 1.6667vw + 0.6667rem, 2.0000rem);
}Fluid Scaling Graph
200px – 1600px viewportViewport Simulator
768px → 1.467remThe quick brown fox jumps over the lazy dog.
Frequently Asked Questions
How is the clamp value calculated?
The preferred value is a linear function of viewport width: slope * 100vw + intercept. Slope = (maxValue - minValue) / (maxWidth - minWidth). The result scales fluidly between your breakpoints.
Should I use px or rem?
rem is recommended for typography since it respects the user's browser font size preference. px is fine for spacing in contexts where you control the base size.
What is the viewport simulator?
The viewport simulator lets you drag to any width and see the computed value in real time — both the raw number and a live text/spacing preview.