Company
Date Published
Author
Facundo Corradini
Word count
915
Language
-
Hacker News points
None

Summary

The newest release of Google Chrome introduces the backdrop-filter property, enabling web developers to create effects similar to iOS's frosted glass with just a few lines of CSS. This property applies filters to an element’s backdrop, allowing for various visual effects such as blur, grayscale, and sepia. Initially supported by Safari and Edge, Chrome and other Chromium-based browsers now include this feature, though developers should still account for browsers like Firefox that may not support it. Using the @supports query, developers can implement progressive enhancement to ensure compatibility across browsers, providing alternative styles when backdrop-filter isn’t supported. Beyond simple effects, multiple filters can be combined for more complex visuals, offering creative possibilities beyond the frosted glass effect. In addition to the backdrop-filter, Chrome’s update includes other features like the prefers-color-scheme media query and improvements for Progressive Web Apps (PWAs).