CSS Infinity Use Cases

A comprehensive guide to using CSS infinity and -infinity constants for solving design problems elegantly.

Key Use Cases Covered

• Circles and Pills: Using calc(infinity * 1px) for border-radius instead of arbitrary large values

• Perpetual State: Freezing animations/transitions with calc(infinity * 1s)

• Z-index Management: Ensuring elements stay on top without arbitrary large values

• Responsive Design: Dynamic radius calculations with infinity

• View Transitions: Creating smooth visual transitions between states

• Scroll Triggers: Interactive scroll-based animations

• Backdrop Filters: Advanced visual effects

Written by Adam Argyle, a CSS Working Group member and creator of Open Props. This 7-minute read teaches developers both practical and creative applications of these underutilized CSS constants.