CSS Clamp Calculator and Tutorial

Responsive design used to mean writing media queries everywhere. Want different font sizes on mobile and desktop? Write a breakpoint. Different padding? Another breakpoint. The result was CSS full of arbitrary jumps and values that never quite felt smooth.

There's a better way: CSS clamp() makes values scale fluidly based on viewport width. No jumps, no breakpoints for sizing. Just smooth interpolation from mobile to desktop.

Here's a calculator to generate these values instantly. Below it, I'll explain exactly how the math works so you actually understand what's happening.

The Calculator

Why Clamp Matters

I used to set breakpoints everywhere. Something like this:

.heading {
  font-size: 24px;
}
@media (min-width: 768px) {
  .heading {
    font-size: 36px;
  }
}
@media (min-width: 1024px) {
  .heading {
    font-size: 48px;
  }
}

Three font sizes. Two breakpoints. And if you slowly resize your browser, you'll see the text snap between sizes at exactly 768px and 1024px. It's jarring. Drag the slider below and watch the left side jump:

The right side uses clamp(). Same start and end values, but it transitions smoothly through every viewport width in between. No jumps. Just gradual scaling.

Building Up From Zero

Let's understand this from first principles. No magic, just math you can follow.

Step 1: What is vw?

The unit vw means "viewport width." 1vw equals 1% of the browser's current width.

• On a 1440px screen: 1vw = 14.4px
• On a 430px phone: 1vw = 4.3px
• On a 2560px monitor: 1vw = 25.6px

So if you set font-size: 5vw, the font will be 5% of whatever the viewport width is. Try it:

Step 2: The Problem With Pure vw

If you just use font-size: 5vw, you get perfect scaling but no limits. On a phone (430px), that's only 21.5px. On a 4K monitor (2560px), that's 128px. Way too small and way too big.

We need boundaries: a minimum size for small screens and a maximum for large screens.

Step 3: Enter clamp()

The CSS clamp() function takes three values:

clamp(MIN, PREFERRED, MAX)

• MIN is the floor - the value never goes below this
• PREFERRED is the scaling value (usually vw-based)
• MAX is the ceiling - the value never exceeds this

For example:

font-size: clamp(24px, 5vw, 48px);

On a small screen where 5vw would be 15px? You get 24px (the minimum). On a huge screen where 5vw would be 100px? You get 48px (the maximum). In between? You get exactly 5vw, smoothly scaling.

Step 4: The Single-Value Formula

If your designer gives you a desktop value like "48px at 1440px width", you can calculate the vw:

vw = (target_px / base_viewport) * 100
vw = (48 / 1440) * 100 = 3.33vw

Then pick a sensible minimum for mobile and you're done:

font-size: clamp(24px, 3.33vw, 48px);

But there's a catch. At 430px (typical phone width), 3.33vw equals only 14.3px. That's smaller than your 24px minimum, so clamp will use 24px. But what if you wanted exactly 24px at 430px and exactly 48px at 1440px, with smooth scaling in between?

Step 5: The Two-Value Formula

When you have both mobile and desktop measurements (like from Figma designs), you can create a line that passes through both points exactly.

The math is finding a linear equation: y = mx + b

Where:

• y is the output size in pixels
• x is the viewport width
• m is the slope (how fast it scales)
• b is the base offset

Given:

• 24px at 430px viewport
• 48px at 1440px viewport

slope = (48 - 24) / (1440 - 430) = 24 / 1010 = 0.0238
base = 24 - (0.0238 * 430) = 13.77px
vw = 0.0238 * 100 = 2.38vw

Result:

font-size: clamp(24px, 2.38vw + 13.77px, 48px);

This hits exactly 24px at 430px and exactly 48px at 1440px. Try it yourself:

Common Pitfalls

Don't Let Big Values Run Wild

Large elements scale aggressively. A 60px heading at 1440px becomes 107px at 2560px if you let it scale freely. For text, usually cap at your desktop design value. For spacing, you might let it grow (more breathing room on big screens is nice).

Watch Your Base Offset

When the two-point formula produces a negative base, your clamp looks like:

clamp(24px, 2.38vw - 4px, 48px)

That minus sign is intentional and correct. Don't "fix" it.

Test at Key Widths

Always check your values at: 320px (small phone), 430px (iPhone), 768px (tablet), 1024px (small laptop), 1440px (desktop design), 1920px (large desktop), and if you care about 4K, 2560px.

In Tailwind

Use arbitrary values:

<!-- Simple -->
<h1 class="text-[clamp(24px,3.33vw,48px)]">Heading</h1>
 
<!-- With base offset -->
<h1 class="text-[clamp(24px,2.38vw+13.77px,48px)]">Heading</h1>
 
<!-- Spacing -->
<section class="py-[clamp(40px,5.94vw+14.45px,100px)]">

Note: In Tailwind arbitrary values, don't put spaces around the operators. Use 2.38vw+13.77px not 2.38vw + 13.77px.

Quick Reference

Common values for a 430px/1440px design system:

Now you understand the math. Use the calculator at the top whenever you need to generate values quickly.

Browse more tools and calculators.