How to use CSS Clamp Generator
- Enter the minimum and maximum size in pixels.
- Enter the viewport widths where scaling starts and stops.
- Copy the clamp() value.
About this tool
clamp(min, preferred, max) keeps a value between a lower and upper bound while the preferred part scales with the viewport width. The generator computes the linear preferred value so the size equals your minimum at the small viewport and your maximum at the large one.
Using rem in the bounds keeps the text responsive to user font size settings.
Frequently Asked Questions
- Why mix rem and vw?
- The vw part scales with the screen and the rem part keeps the value responsive to user settings.
- What viewports should I use?
- Common choices are 320 px for small phones and 1200 to 1440 px for desktops.
Related tools
- PX to REM ConverterConvert between pixels and rem for scalable CSS.
- CSS Button GeneratorCreate a styled button and copy its CSS, including the hover state.
- CSS Box Shadow GeneratorAdjust the sliders and copy the box-shadow CSS.
- Glassmorphism CSS GeneratorBuild a frosted glass card and copy the CSS.
- CSS Gradient GeneratorDesign a gradient visually and copy the CSS background.
- Custom Scrollbar GeneratorDesign a scrollbar that matches your site and copy the CSS.