CSS Clamp Generator
Generate a fluid CSS clamp() value from min/max sizes and viewport widths.
Output
Enter a minimum and maximum size along with the viewport range they apply to, and get a ready-to-use CSS clamp() expression for fluid, responsive typography or spacing.
How to use
- Enter the minimum and maximum size in pixels.
- Enter the minimum and maximum viewport width the sizes should apply between.
- Copy the generated clamp() declaration, optionally renaming the CSS property.
Frequently asked questions
- How is the fluid value calculated?
- It computes a linear slope between the min and max sizes across the viewport range, expressed as a rem + vw formula inside clamp().
- Why does the output use rem and vw?
- rem keeps the base size relative to the user's font settings, while vw makes it scale smoothly with viewport width.
- What if my max viewport is smaller than my min viewport?
- The tool shows a validation message asking you to make the maximum viewport width larger than the minimum.