How to use the css clamp generator
- Enter the minimum and maximum sizes you want your element to scale between.
- Choose whether those sizes are in
pxorrem. - Set the minimum and maximum viewport widths where scaling should start and stop.
- Adjust the root font size if your project uses something other than the default 16px.
- Copy the generated
clamp()value directly into your stylesheet.
How the clamp formula works
The CSS clamp(min, preferred, max) function restricts a value between a lower and upper bound. For fluid typography, the preferred value is a linear equation combining viewport-relative units (vw) and fixed units (rem). The slope determines how fast the size grows as the viewport widens.
Given a minimum size of 16px at a 320px viewport and a maximum size of 24px at a 1200px viewport, the slope is calculated as:
slope = (24 - 16) / (1200 - 320) = 8 / 880 = 0.009091
Converted to vw, that is 0.9091vw. The intercept is the size when the viewport is zero, converted to rem:
intercept = 16px - (0.009091 * 320px) = 13.0909px = 0.8182rem
The final output from this css clamp generator is clamp(1rem, 0.9091vw + 0.8182rem, 1.5rem).
Verification at breakpoints
A reliable clamp calculator css tool should show that the generated function produces the correct values at the boundaries. At the minimum viewport width of 320px, the preferred value evaluates to:
0.9091vw + 0.8182rem = (0.009091 * 320) + (0.8182 * 16) = 2.909px + 13.091px = 16px
Because 16px equals the minimum bound, clamp returns 16px. At 1200px, the same calculation gives 24px, matching the maximum bound. The numbers in the output are rounded to four decimals, so the result can differ from the target by a few thousandths of a pixel. The check rows in the tool use the rounded numbers exactly as printed. Between these viewports the size scales linearly.
Common fluid typography values
This table shows typical outputs from a fluid typography generator using a 320px to 1200px viewport range and a 16px root size. These serve as starting points for a type scale.
| Element | Min size | Max size | Generated clamp |
|---|---|---|---|
| Small text | 12px | 14px | clamp(0.75rem, 0.2273vw + 0.7045rem, 0.875rem) |
| Body copy | 16px | 18px | clamp(1rem, 0.2273vw + 0.9545rem, 1.125rem) |
| H3 heading | 20px | 24px | clamp(1.25rem, 0.4545vw + 1.1591rem, 1.5rem) |
| H2 heading | 24px | 32px | clamp(1.5rem, 0.9091vw + 1.3182rem, 2rem) |
| H1 heading | 32px | 48px | clamp(2rem, 1.8182vw + 1.6364rem, 3rem) |
Using clamp for spacing and layout
While most developers search for a fluid typography generator, the clamp() function is equally useful for margins, padding, and gaps. Instead of writing media queries to adjust section spacing, you can use a single declaration like gap: clamp(1rem, 2vw + 0.5rem, 3rem).
This approach keeps your stylesheets shorter and avoids layout jumps at specific breakpoints. When combined with tools like a CSS grid generator or flexbox generator, fluid spacing creates layouts that adapt smoothly across all screen sizes without manual intervention.
Mistakes to avoid
The most common error when using a css clamp generator is mixing up units. If your minimum size is in rem but your viewport widths are in px, the math requires converting everything to a shared base unit first. Always ensure your root font size matches what your project actually uses.
Another issue is setting the minimum viewport larger than the maximum viewport, which would give a negative slope and make the text shrink as the screen grows. This tool rejects that input. Finally, remember that clamp does not prevent users from zooming. If accessibility is a priority, test your fluid type at 200% zoom to ensure it remains readable.
Worked examples
| Example | Input | Result |
|---|---|---|
| Body text 16px to 18px | Minimum size: 16; Maximum size: 18; Input unit: px; Minimum viewport width (px): 320; Maximum viewport width (px): 1200; Root font size (px): 16 | Clamp value: clamp(1rem, 0.2273vw + 0.9545rem, 1.125rem); Slope: 0.2273vw; Intercept: 0.9545rem; Verify at min viewport: 16.00px; Verify at max viewport: 18.00px |
| Heading 1.5rem to 3rem | Minimum size: 1.5; Maximum size: 3; Input unit: rem; Minimum viewport width (px): 320; Maximum viewport width (px): 1200; Root font size (px): 16 | Clamp value: clamp(1.5rem, 2.7273vw + 0.9545rem, 3rem); Slope: 2.7273vw; Intercept: 0.9545rem; Verify at min viewport: 24.00px; Verify at max viewport: 48.00px |
| Section gap 24px to 64px | Minimum size: 24; Maximum size: 64; Input unit: px; Minimum viewport width (px): 375; Maximum viewport width (px): 1440; Root font size (px): 16 | Clamp value: clamp(1.5rem, 3.7559vw + 0.6197rem, 4rem); Slope: 3.7559vw; Intercept: 0.6197rem; Verify at min viewport: 24.00px; Verify at max viewport: 64.00px |
FAQ
What does a CSS clamp generator do?
It calculates the exact clamp() function needed to scale a CSS property smoothly between a minimum and maximum value based on the viewport width. It handles the math for the vw and rem components automatically.
Why use clamp instead of media queries for font sizes?
The clamp() function provides continuous scaling rather than abrupt jumps at specific breakpoints. This means text sizes transition smoothly as the window resizes, reducing the amount of CSS required.
Can I use this as a fluid typography generator?
Yes. By entering your desired minimum and maximum font sizes along with your target viewport range, this tool acts as a fluid typography generator that outputs ready-to-use CSS.
What happens if the minimum and maximum sizes are the same?
If both sizes are identical, no scaling is needed. The tool will output a single fixed value in rem instead of a clamp() function.
Does the root font size setting matter?
Yes. The root font size is used to convert pixels to rem units. If your project sets the html font size to something other than 16px, you must update this field so the rem calculations remain accurate.
Is this clamp calculator css tool safe to use offline?
All calculations run entirely in your browser. No data is sent to any server, making it safe to use on any network or offline.