Generate a fluid CSS clamp() value that scales smoothly from a minimum size on small screens to a maximum size on large screens. Enter your sizes and viewport range to get ready-to-paste CSS, the math behind it, a size table for common breakpoints and an optional fluid type scale.
Last updated:
Size range
Viewport range
px
px
px
1rem in px (browser default 16)
e.g. font-size, padding, gap, margin
Optional fluid type scale
1.2 = minor third
1.333 = perfect fourth
Enter your values to see the result.
Advertisement
Advertisement
How to use the CSS Clamp Generator
Enter the minimum and maximum size in px or rem.
Set the viewport range where the size should grow, e.g. 320px to 1280px.
Choose rem or px output and the property you are sizing.
Copy the CSS from the result and paste it into your stylesheet.
Optionally tick the type scale to get a full set of fluid heading sizes as CSS custom properties.
The clamp() formula
A fluid size is a straight line between two points: (minimum viewport, minimum size) and (maximum viewport, maximum size).
Quantity
Formula
Example: 16→24px, 320→1280px
Slope
(maxSize − minSize) ÷ (maxVw − minVw)
8 ÷ 960 = 0.008333
Preferred vw part
slope × 100
0.8333vw
Intercept
minSize − slope × minVw
16 − 2.667 = 13.333px = 0.8333rem
CSS
clamp(min, intercept + slope×100vw, max)
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)
Common fluid type ranges
Element
Min → max (px)
clamp() for 320px → 1280px
Body text
16 → 18
clamp(1rem, 0.9583rem + 0.2083vw, 1.125rem)
Lead paragraph
18 → 22
clamp(1.125rem, 1.0417rem + 0.4167vw, 1.375rem)
H3
20 → 28
clamp(1.25rem, 1.0833rem + 0.8333vw, 1.75rem)
H2
24 → 36
clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem)
H1
32 → 56
clamp(2rem, 1.5rem + 2.5vw, 3.5rem)
Popular type scale ratios: 1.125 (major second), 1.2 (minor third), 1.25 (major third), 1.333 (perfect fourth), 1.5 (perfect fifth) and 1.618 (golden ratio). Using a smaller ratio on phones and a larger one on desktops keeps headings from overwhelming small screens.
Frequently asked questions
How does CSS clamp() work?
clamp(MIN, PREFERRED, MAX) returns the preferred value but never less than MIN or more than MAX. For fluid type the preferred value mixes a fixed part and a viewport part, such as 0.8333rem + 0.8333vw, so the size grows linearly with the screen width between the two limits.
What is the formula for a fluid clamp value?
slope = (maxSize − minSize) ÷ (maxViewport − minViewport); intercept = minSize − slope × minViewport; preferred value = intercept + slope × 100vw. For 16px to 24px between 320px and 1280px: slope = 8 ÷ 960 = 0.008333, intercept = 13.333px, giving clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem).
Why use rem instead of px in clamp()?
rem values scale with the font size the user sets in their browser, so the text respects their preference. A clamp() made only of px and vw ignores that setting. Keeping a rem part in the preferred value also lets browser zoom enlarge the text.
Is fluid typography accessible?
It can be, but sizes driven mostly by vw do not grow when users zoom. A common rule of thumb is to keep the maximum size at no more than about 2.5 times the minimum, and to include a rem component, so 200% zoom (WCAG 1.4.4) still works.
Which browsers support clamp()?
All modern browsers: Chrome and Edge 79+, Firefox 75+ and Safari 13.1+. It is safe to use in production today.
Can I use clamp() for spacing too?
Yes. clamp() works with any length property, such as padding, margin, gap, width or border-radius. Change the CSS property field and the tool writes the full declaration.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.