Overview
Generate fluid CSS clamp() values in seconds
The CSS clamp() function takes three values: a minimum, a preferred value, and a maximum. The browser uses the preferred value but never lets it drop below the minimum or rise above the maximum. When the preferred value is built from viewport units, the result scales smoothly with the screen width without a single media query.
This generator turns a minimum and maximum size into a ready to paste clamp() value for fluid typography or spacing. You set the size range and the viewport range, and it computes the linear curve that connects them. Everything happens in your browser.
Step-by-step
How to use the clamp generator
- 1
Set the size range
Enter the minimum and maximum size in pixels. For a heading you might use 24px at the small end and 48px at the large end. - 2
Set the viewport range
Enter the viewport widths where those sizes should apply. The defaults of 320px and 1280px cover most phones up to laptops. - 3
Copy the result
The clamp() value updates live. Click copy and paste it into any font-size, margin, padding, or gap declaration.
Background
How the math works
Between the two viewport widths the size grows in a straight line. The slope is the change in size divided by the change in viewport width: (maxSize - minSize) / (maxVw - minVw). From that slope the tool builds the preferred term as a rem intercept plus a vw coefficient, so the value tracks the viewport while staying readable when the user zooms.
Why rem and vw together
A pure vw value ignores the user browser font size and breaks accessibility zoom. Mixing a rem base with a vw slope keeps the text responsive to the viewport while still respecting the root font size, which is why the preferred term looks like calc(1rem + 2vw) rather than a bare vw number.
Why convert to rem
The minimum and maximum are output in rem by dividing the pixel value by the root font size, 16px by default. This means a user who increases their default text size still gets a proportionally larger clamp result.
Use cases
When to use clamp()
Fluid headings
Scale h1 and h2 sizes between mobile and desktop without writing separate breakpoints.
Responsive spacing
Use clamp() for section padding and gaps so layouts breathe more on large screens.
Container widths
Set a width that grows with the viewport but stops at a comfortable maximum line length.
Hero text
Make landing page hero copy feel large on desktop while staying legible on phones.
Button and badge sizing
Scale interactive elements slightly with the viewport to keep tap targets balanced.
Design system tokens
Bake fluid type and spacing into reusable variables so every component scales the same way.
Tips and best practices
- Keep the minimum readable. Never let body text drop below about 16px on small screens.
- Use a sensible maximum so large monitors do not get oversized text or huge gaps.
- Match the viewport range to your real breakpoints rather than arbitrary numbers.
- Mixing rem and vw, as this tool does, keeps clamp() friendly to browser zoom.
- Test the result by resizing your browser window from narrow to wide.
Common questions
What do the three values in clamp() mean?
The first is the minimum, the second is the preferred value that scales with the viewport, and the third is the maximum. The browser always keeps the result between the minimum and maximum.
Why is there a vw unit in the middle?
The vw unit is one percent of the viewport width. It is what makes the value grow as the screen widens. The rem part anchors the curve so it starts at the right size.
Can I use clamp() for spacing, not just fonts?
Yes. The same value works for margin, padding, gap, width, and more. Fluid spacing is one of the most popular uses of clamp().
Is clamp() widely supported?
Yes. clamp() works in all modern browsers. For very old browsers you can provide a static fallback declaration before the clamp() line.
100% private