CSS clamp() Generator
Turn a min size, a max size, and a viewport range into a ready-to-copy fluid clamp() value — smooth responsive scaling between breakpoints, no media queries required.
Fluid type without the media-query stack
Stepping a heading through three or four fixed sizes at breakpoints is a lot of CSS for a curve that should just be smooth. A single clamp() value does it continuously: the text grows with the viewport between your limits, then stops. The maths — finding the slope and the offset that hit both your endpoints exactly — is fiddly by hand and instant here.
Pick sensible endpoints by checking pixel sizes against real screens with the viewport units calculator, and convert any fixed rem figures with the px, rem & em converter.
Frequently Asked Questions
What does clamp() do?
clamp(MIN, PREFERRED, MAX) returns the preferred value, but never lets it drop below MIN or rise above MAX. When the preferred term includes a viewport unit, the result scales with the screen between your two size limits and then holds flat outside them — fluid typography and spacing in a single line, without a stack of media queries.
How is the fluid middle value worked out?
It is the straight line through two points: your minimum size at the smallest viewport and your maximum size at the largest. The generator finds the slope (size change per pixel of viewport width) and expresses it as a vw value, plus a constant rem offset so the line passes through both points exactly. For 16px at 320px growing to 24px at 1280px, that comes out to about 0.8333rem + 0.8333vw.
Why use rem inside the clamp instead of px?
Using rem for the min, max, and the constant term keeps the value responsive to a user's browser font-size setting, which is better for accessibility — a pure-px clamp ignores that preference. The generator converts your pixel inputs to rem using the root font-size you specify, while keeping the fluid term in vw so it still tracks the viewport.
Can I use clamp() for things other than font-size?
Yes. The same value works for padding, margins, gap, widths, and section spacing — anywhere you want a measurement to scale smoothly between two breakpoints. Fluid type is the most common use, but a clamped container width or vertical rhythm can remove a lot of breakpoint-specific CSS.
A convenience generator for fluid CSS. Preview the value across your real breakpoints and confirm it never scales below a legible size.