🔒 Runs in your browser — nothing is uploaded✓ Free, no signup
CSS Clamp() Calculator
Enter the smallest and largest size and the viewport range, and get a clamp() value that scales smoothly between them — no media queries needed.
Values
CSS
font-size: clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem);
How it scales
| Viewport width | Computed size |
|---|---|
| 320px | 16px |
| 375px | 16px |
| 908px | 20px |
| 1440px | 24px |
| 1920px | 24px |
At your current window width (1024px): 20.88px
The quick brown fox jumps over the lazy dog
When should you use the CSS Clamp Calculator?
- Making headings shrink smoothly on phones
- Fluid padding, gaps and margins
- Building a responsive type scale
How to use the CSS Clamp Calculator
- 1
Set the sizes
The size at the smallest screen and at the largest screen, in px.
- 2
Set the viewport range
Usually 375px (phone) to 1280–1440px (desktop).
- 3
Choose the unit
rem respects the user's font-size setting, so it's best for text.
- 4
Copy
Copy the clamp() value and check the table of computed sizes.
Examples
16px to 24px, 375px to 1440px
Values
Min 16px · Max 24px · Viewport 375px → 1440px · Root 16px
CSS
font-size: clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem);
Common errors and how to fix them
The maximum viewport must be wider- The max viewport width has to be larger than the min viewport width.
Text doesn't grow when zooming- Use rem output — a pure vw value ignores browser zoom, but the rem part keeps it accessible.
More from Design & Color
Free tools that run in your browser — no signup, nothing uploaded.
Color Picker & Converter
Pick a color and convert between HEX, RGB and HSL instantly.
Color Palette Generator
Generate harmonious color palettes and export them as CSS, Tailwind or JSON.
CSS Gradient Generator
Build linear and radial CSS gradients visually and copy the code.
PX to REM Converter
Convert pixels to rem and rem to pixels for any root font size.
CSS Box Shadow Generator
Design layered CSS box shadows visually and copy the CSS or Tailwind class.
CSS Border Radius & Blob Generator
Set rounded corners per side or make organic blob shapes, then copy the CSS.
Glassmorphism CSS Generator
Create frosted-glass UI cards with backdrop blur and copy the CSS.
CSS Text Shadow Generator
Build CSS text shadows — soft, neon, outline or retro — and copy the code.
JSON Auto-Fixer & Formatter
Repair, validate, and beautify broken JSON (missing quotes, trailing commas).
CSS Clamp Calculator FAQ
clamp(min, preferred, max) uses the preferred value but never goes below min or above max. With a vw-based preferred value, sizes scale with the screen width.
It's the straight line between the two points: slope = (max size − min size) ÷ (max viewport − min viewport), written as a rem intercept plus slope × 100 vw.
rem follows the user's browser font size, which matters for accessibility. The calculator converts using your root font size (usually 16px).
Yes, in all modern browsers.
Yes — padding, margin, gap and width all accept clamp().
No. Everything runs in your browser, so your data never leaves your device.