z-index: calc(infinity) and Other Useful Infinity Tricks

I recently discovered that CSS has an infinity constant. You can use it inside calc(), and it does exactly what you think it does.

z-index: calc(infinity);

That gives you the highest possible z-index the browser supports. No more z-index: 99999. No more "I'll just add another 9". No more z-index arms races. You've won. Permanently.

Why It Works

infinity in CSS isn't actually infinite. It resolves to the largest value the browser can store for that property. For z-index, that's 2,147,483,647 — the maximum 32-bit signed integer. For pixel lengths, it's even larger (and varies by browser and OS).

The key insight is: you don't need to know the number. You just need "the biggest one", and infinity gives you exactly that.

The z-index Use Case

This is the one that got me. Every codebase I've worked on has some version of this:

/* please don't change this */
.modal-overlay {
  z-index: 9999;
}

/* sorry */
.toast-notification {
  z-index: 99999;
}

/* I am so sorry */
.critical-alert {
  z-index: 999999;
}

With calc(infinity), there's no ambiguity. If something truly must be on top of everything else, say so:

.modal-overlay {
  z-index: calc(infinity);
}

It's self-documenting. When someone reads this, the intent is obvious: "this goes on top, always, no exceptions". Compare that to z-index: 9999 where the reader has to wonder: is 9999 actually the highest thing? Or is there a 99999 somewhere else?

Pill-Shaped Elements

You've probably written this before:

.pill {
  border-radius: 9999px;
}

The 9999px is a magic number. It works because it's larger than any element you'd realistically have, so the border radius collapses into a perfect semicircle on each end. But it's still an arbitrary choice. Why 9999? Why not 99999?

.pill {
  border-radius: calc(infinity * 1px);
}

Same result, but the intent is explicit: "as round as possible". The * 1px is needed to turn the unitless infinity into a pixel value — infinity alone is just a number, not a length.

Dividing by Zero

Here's a fun one. calc(1 / 0) equals infinity. So does calc(1px / 0) — and that one gives you infinity with units, which means you don't need the * 1px trick:

/* These are equivalent */
border-radius: calc(infinity * 1px);
border-radius: calc(1px / 0);

I'd still use infinity directly — it reads better — but it's good to know that CSS handles division by zero gracefully instead of crashing.

Negative Infinity

There's also -infinity, which gives you the smallest possible value:

.offscreen {
  position: absolute;
  left: calc(-infinity * 1px);
}

This is a more expressive version of the classic left: -9999px pattern used for visually hidden content. Though honestly, for that specific use case I'd still use clip and the modern screen-reader-only approach.

What You Can't Do

You can't animate to infinity in any meaningful way. If you try:

@keyframes fly-away {
  to { translate: calc(infinity * 1px); }
}

The element jumps immediately to the end position and stays there. A fraction of infinity is still infinity, so every frame of the animation computes to the max value. No interpolation possible.

Similarly, animation-delay: calc(infinity * 1s) means the animation never starts. Which is technically correct — the best kind of correct.

Browser Support

infinity inside calc() is supported in Chrome 119+, Firefox 113+, and Safari 15.4+. As of early 2026, that's essentially everyone.

Should You Actually Use This?

For z-index? Yes. It replaces magic numbers with clear intent, and the behaviour is consistent across browsers.

For border-radius pills? Sure, if you want to be explicit. 9999px works fine too — this is more about readability than functionality.

For everything else? Probably not. It's a fun trick, but most CSS doesn't need values this large. The real value of infinity is semantic: it tells the next developer "I don't care what the number is, I just need the biggest one".

And honestly, that's what magic numbers have always been trying to say. Now there's a proper way to say it.