Calculate a responsive CSS clamp() value from minimum and maximum sizes and viewport widths. Generate fluid typography or spacing that scales smoothly without media-query steps.
How to use the CSS Clamp Calculator
Enter the smallest and largest desired pixel values and the viewport widths where each should apply. Copy the generated clamp() expression into your CSS property.
Frequently Asked Questions
How is CSS clamp calculated?
The calculator derives a linear vw slope and intercept between your minimum and maximum viewport widths.
What does clamp() do in CSS?
clamp(minimum, preferred, maximum) keeps a fluid value within fixed lower and upper bounds.
Can I use this for spacing?
Yes. The result works for font-size, padding, margin, gap, width, and other length properties.
Why include viewport bounds?
They define where scaling begins and ends, preventing text or spacing from becoming too small or large.
Does the output require JavaScript?
No. The copied clamp() expression is pure CSS.