The new progress() function in CSS

Imagine a responsive hero image that becomes more transparent as the viewport gets narrower, helping text readability on small screens or a card that scales up slightly as the viewport grows, adding a subtle polish.

Until now, achieving these effects required complex calc() expressions or JavaScript, often leading to brittle solutions. But with the new CSS progress()function, you can express these relationships cleanly and intuitively.

With the new CSS progress() function, you can express “how far” the viewport width has moved between a minimum and maximum size, and map that directly to opacity.

Source: The new progress() function in CSS — Amit Merchant — A blog on PHP, JavaScript, and more