CSS clamp() Calculator
Enter your min size, max size, and breakpoints below, and this CSS clamp calculator outputs the exact clamp() formula for smooth, responsive scaling.
About
About CSS clamp() Calculator
The CSS clamp() function takes a minimum value, a preferred value, and a maximum value, and lets an element scale smoothly between the min and max based on viewport width, instead of jumping between fixed sizes at specific breakpoints the way media queries do. A css clamp calculator works out the preferred value's formula for you, since that middle argument is a linear interpolation most people would otherwise have to calculate by hand.
Before clamp(), fluid sizing meant writing a separate media query for every breakpoint where you wanted the font size to change, which produces visibly stepped jumps as someone resizes their browser rather than a smooth transition. clamp() replaces that entire set of media queries with a single line that scales continuously.
The preferred value in the middle of a clamp() expression is a linear interpolation formula, typically something like 1rem + 1vw, calculated from your minimum size at your minimum viewport width and your maximum size at your maximum viewport width. Working that slope and intercept out by hand is where people make small arithmetic mistakes, which is exactly the part this calculator handles automatically.
Enter your minimum and maximum font sizes, along with the viewport widths where you want scaling to start and stop, and the tool calculates the preferred value expression and outputs a complete, ready-to-use clamp() rule.
This saves real time for anyone building a fluid type system across a site, since getting the growth rate right by hand usually means several rounds of resizing the browser and eyeballing it. The calculation runs entirely in your browser, so there's no delay between changing an input and seeing the updated formula.
FAQ
Frequently asked questions
What does the clamp() function actually do?
It takes three values, a minimum, a preferred (dynamic) value, and a maximum, and lets a property scale fluidly within those bounds based on the viewport, while guaranteeing it never shrinks below the minimum or grows past the maximum.
Why is clamp() better than relying on media queries alone?
Media queries change a value abruptly at a specific breakpoint, producing a visible jump. clamp() scales the value continuously as the viewport changes, which reads as noticeably smoother and more polished as someone resizes their browser or rotates their device.
What exactly is the preferred value in a clamp() expression?
It's the middle argument, usually a formula combining a fixed unit like rem with a viewport-relative unit like vw. That combination is what creates the actual scaling behavior between your defined minimum and maximum.
Can clamp() be used for anything besides font size?
Yes, it works with any CSS property that accepts a length value, padding, margin, width, gap, and more, not just typography, even though fluid type is where it shows up most often.
Does this calculator output rem units or pixels?
It accepts pixel inputs, since that's usually how designers think about sizing, but outputs the formula in rem units, which is the better practice for accessibility since it respects a user's browser font size settings.
Is clamp() safe to use in production today?
Yes, it has strong support across all current major browsers, Chrome, Firefox, Safari, and Edge, so it's safe to ship without a JavaScript fallback for modern browser support targets.
Related tools
View all developer tools →Color Contrast Checker (WCAG)
Check text and background color contrast against WCAG AA and AAA.
Open toolColor Picker
Pick colors from an image with an eyedropper and check contrast ratios.
Open toolPalette Generator
Extract a color palette from any image and export it in one click.
Open toolHEX to RGB Converter
Convert colors between HEX, RGB, HSL and CMYK.
Open tool