What Is the CSS Clamp Calculator?
Generate fluid CSS clamp() values for responsive typography and spacing. Enter minimum and maximum sizes with viewport breakpoints, and get production-ready clamp() declarations.
Why Use This Tool?
Fluid typography scales smoothly between breakpoints without media queries. The clamp() function sets a minimum, a preferred viewport-based value, and a maximum — but calculating the preferred value formula is non-trivial. This tool does the math for you.
How to Use This CSS Clamp Calculator
- Set your minimum value — Enter the smallest size (e.g., 16px for body text). This is the floor — the value won't go below this on any screen.
- Set your maximum value — Enter the largest size (e.g., 24px). This is the ceiling — the value caps here on large screens.
- Define your viewport range — Set the minimum and maximum viewport widths where the fluid scaling should happen (e.g., 320px to 1200px).
- Copy the clamp() function — The tool generates the complete
clamp(min, preferred, max) value with the correct vw calculation for the preferred (middle) value.
Tips and Best Practices
- → Use clamp() for fluid typography. Instead of media queries with fixed breakpoints,
clamp() creates smooth, continuous scaling — fewer lines of CSS and a more polished result.
- → The preferred value is the magic. The middle value in
clamp(min, preferred, max) is usually a viewport-relative calculation. This tool handles the math so you don't have to.
- → Apply clamp to more than font-size. Use it for padding, margin, gap, max-width — any property that benefits from fluid scaling between viewport sizes.
- → Test at extreme viewport sizes. Resize your browser to very narrow (320px) and very wide (2560px) to verify your clamp values behave correctly at the boundaries.
Frequently Asked Questions
What is CSS clamp()?
clamp(min, preferred, max) constrains a value between a minimum and maximum. The preferred value (usually involving viewport units) determines the scaling rate between the two bounds.
How do I calculate the preferred value?
The formula is: preferred = minSize + (maxSize - minSize) × (100vw - minViewport) / (maxViewport - minViewport). This tool computes it automatically from your inputs.
Can I use clamp() for spacing, not just font sizes?
Absolutely. clamp() works for any CSS property that accepts length values: padding, margin, gap, width, and more. Fluid spacing paired with fluid typography creates layouts that feel intentional at every viewport width.
What is CSS clamp()?+
CSS clamp() is a function that constrains a value between a minimum and maximum while allowing fluid scaling in between. The syntax is clamp(MIN, PREFERRED, MAX). The browser uses the preferred value as long as it stays within the min and max bounds. It's widely used for responsive typography and spacing without media queries.
How is clamp() different from min() and max()?+
clamp(a, b, c) is equivalent to max(a, min(b, c)). The min() function returns the smallest of its arguments, max() returns the largest, and clamp() combines both by constraining a value to a range. clamp() is most readable for responsive sizing.
Is CSS clamp() supported in all browsers?+
Yes, clamp() has excellent support across all modern browsers — Chrome 79+, Firefox 75+, Safari 13.1+, and Edge 79+. The only concern is very old browsers (pre-2020), where you should provide a fallback value before the clamp() declaration.
What is the formula for fluid typography with clamp?+
The clamp pattern for typography is clamp(min-size, preferred-with-viewport-slope, max-size) where the preferred value is a linear function of viewport width. The math is: slope = (max-size - min-size) / (max-viewport - min-viewport), intercept = min-size - (slope * min-viewport), preferred = intercept + (slope * 100vw). The calculator handles the arithmetic and emits the result in either rem or px units depending on your preference.
Why does my clamp output not match the design at the exact breakpoints?+
clamp interpolates linearly between the min and max, which means at intermediate viewport widths the value differs from what you might design at fixed breakpoints. If a Figma file specifies 16px at 320px viewport and 24px at 1440px viewport, the clamp output passes through both endpoints exactly but everything in between is on a straight line. For step changes at specific breakpoints, use container queries or media queries instead. clamp is for smooth fluid scaling.
Built by Derek Giordano · Part of Ultimate Design Tools
Privacy Policy · Terms of Service