CSS Clamp Generator
Fluid type and spacing that scales between two widths. No media queries.
Preview
The quick brown fox
font-size: clamp(1rem, 0.6667rem + 1.6667vw, 2rem);
/* Tailwind */
text-[clamp(1rem,0.6667rem_+_1.6667vw,2rem)]One declaration instead of four breakpoints
Fluid values are the one place CSS lets you delete media queries outright. Give
clamp() a floor, a ceiling and a line between them, and the browser interpolates
every width in between — smoothly, and without a single breakpoint to maintain.
How to use it
-
Set the size range
Enter the size you want at the narrowest screen and the size you want at the widest. Both in pixels — the output converts to rem for you.
-
Set the viewport range
The widths between which the value should scale. Below the minimum and above the maximum it stays pinned; 320 to 1280 covers most sites.
-
Check the scale
The bars show the computed size at seven common widths, with the pinned ends marked, so you can see exactly where the fluid range starts and stops.
-
Copy it
Take the CSS declaration, or the Tailwind arbitrary value if you are working in utilities.
Why not just use vw?
A raw vw value has no floor and no ceiling. At 320px your heading collapses to
something unreadable; on an ultrawide monitor it grows to absurdity. clamp() is
the same fluid behaviour with both ends nailed down, which is why it replaced the old
"font-size with four media queries" pattern almost entirely.
The accessibility catch
If every part of your clamp is in px and vw, the value no longer
responds to the reader's browser font-size preference — someone who has set their default text
to 24px gets your 16px anyway. Keeping the bounds in rem, which this generator
does by default, keeps that setting working.
Fluid spacing beats fluid type
Most people reach for clamp() for headings and stop there. Section padding and
grid gaps benefit at least as much: a 24px gap that feels right on a phone is cramped at
1600px. Set the property selector to gap and paste the result straight into a
track list in the grid generator.
Frequently asked questions
What does CSS clamp() do?
clamp(min, preferred, max) returns the preferred value but never lets it go below the minimum or above the maximum. Because the preferred value can use vw units, it gives you a size that scales with the viewport and then stops at both ends — fluid type in one declaration, no media queries.How is the middle value in clamp() calculated?
1.667vw; the leftover intercept is expressed in rem. The clamp then pins both ends.