CSS Infinity Use Cases

CSS infinity (and -infinity!) solve some pretty specific problems elegantly, but can also just be plain fun to use. Showing support for infinity, -infinity, NaN, pi, and e Lets spur creative CSS juices with infinity and follow a couple use cases. Basics and gotchas # infinity and -infinity need to always be wrapped in calc(). If you want it to represent a dimension, it also needs to be multiplied by a unit like: div { border-radius: calc(infinity * 1px); z-index: calc(infinity); } Not quite limited to calc() too, you can use it with other calc()-like scenarios like clamp(), min(), max(), etc, which we'll dig into a bit 🤘🏻 1. Circles and Pills # Before infinity, I would have used scientific notation like 1e9px (which is 1000000000px) to create a "big enough" radius for circles and pills at any size. But with infinity..!? .radius-full { border-radius: calc(infinity * 1px); } 2. Perma-state # Setting duration calc(infinity * 1s) makes an animation/transition so long that it appears to be…