CSS Clamp() Calculator
Generate CSS clamp() values
The quick brown fox jumps over the lazy dog.
What Is This Tool?
The CSS Clamp() Calculator generates a responsive clamp(min, preferred, max) value using standard linear interpolation, so a font-size (or any size property) scales smoothly between a minimum and maximum viewport width without needing multiple media queries.
How to Use
Enter the minimum and maximum size in pixels you want the element to reach.
Enter the viewport widths at which those sizes should apply.
Choose rem or px for the min/max output unit, then click Calculate.
Copy the generated clamp() declaration into your CSS.
Features
- Standard linear-interpolation formula (slope + y-axis intersection)
- Output in rem (16px base) or px
- Live text preview at the generated size
- Friendly validation for invalid or inverted ranges
- Copy the ready-to-paste CSS declaration
- 100% client-side — nothing leaves your browser
Examples
Input: Min 16px at 320px viewport, Max 24px at 1440px viewport
Output: font-size: clamp(1rem, calc(0.8571rem + 0.7143vw), 1.5rem);
Common Use Cases
- Building fluid typography that scales smoothly across screen sizes
- Replacing multiple font-size media queries with a single declaration
- Sizing spacing, padding, or width values responsively
- Prototyping a fluid design system scale
Frequently Asked Questions
How does the clamp() formula work?
The middle "preferred" value is a linear function of viewport width: slope = (maxSize - minSize) / (maxWidth - minWidth), and the value at 0vw (the y-axis intersection) is -minWidth * slope + minSize. clamp() then keeps the result between your min and max bounds.
Why use rem instead of px for the min/max bounds?
rem respects the user's browser font-size setting, which is better for accessibility, while px is fixed. This tool assumes a 16px root font-size when converting to rem.
Can I use clamp() for properties other than font-size?
Yes, clamp() works for any CSS length property, including width, padding, margin, and gap.
What if max size is smaller than min size?
The tool validates this and shows an error, since a properly interpolated clamp() requires the max size to be greater than or equal to the min size.
Does browser support matter?
clamp() is supported in all modern browsers (Chrome, Firefox, Safari, Edge). It has no support in very old browsers, so consider a fallback font-size declaration before it if you need to support them.
Is my data sent anywhere?
No. The calculation happens entirely in your browser using JavaScript. Nothing is uploaded or logged.