CSS Clamp Generator
Create fluid, responsive font sizes that scale smoothly between a min and max across viewport widths.
Generate fluid CSS with clamp()
The CSS Clamp Generator builds a clamp() value that makes font sizes (or any length) scale smoothly between a minimum and maximum as the viewport changes. Enter your minimum and maximum size and the viewport range they apply over, and copy the ready-to-use CSS. This is modern fluid typography without media queries.
How clamp() works
The CSS clamp(MIN, PREFERRED, MAX) function returns the preferred value but never goes below the minimum or above the maximum. By making the preferred value depend on the viewport width (a vw unit plus a pixel offset), text grows fluidly with the screen — clamped so it never gets too small on phones or too large on wide monitors.
How to use it
- Set the min and max font sizes.
- Set the viewport range over which it scales.
- Copy the generated
clamp()CSS.
Why fluid typography?
| Approach | Result |
|---|---|
| Fixed size | Same on all screens — too small or too big somewhere |
| Media queries | Jumps at breakpoints, more code |
| clamp() | Smooth scaling, one line, no breakpoints |
The math behind it
The generator computes a linear equation from your two size/viewport points: a slope (how fast the size grows per pixel of viewport, expressed in vw) and an intercept (a px offset). That gives a preferred value like 0.5rem + 2vw, wrapped in clamp() with your min and max so it stays in bounds. You don't need to do the algebra — just enter four numbers.
Beyond font size
Although it's most popular for typography, clamp() works on any length property — padding, margins, gaps, widths, and more. The same technique creates fluid spacing that scales with the screen, helping your whole layout feel proportional from mobile to desktop.
Private and free
Everything runs in your browser — nothing is uploaded. The tool is completely free with no sign-up.
Frequently asked questions
What does clamp() do?
It returns a preferred value but never below the minimum or above the maximum — perfect for fluid, responsive sizing.
Does this replace media queries?
For scaling sizes, often yes. clamp() scales smoothly in one line instead of jumping at breakpoints.
Can I use it for spacing too?
Yes. clamp() works on any length — padding, margin, gap, width — not just font size.
Is it free?
Yes, completely free with no sign-up, running entirely in your browser.