Unlock the Power of Frosted Glass Effects on the Web
Imagine being able to recreate the sleek, blurred backgrounds found on iOS devices directly on your website. With the latest release of Google Chrome, this is now possible thanks to the introduction of the backdrop-filter property.
What is backdrop-filter?
The backdrop-filter property allows you to apply a CSS filter to the element’s backdrop, which is essentially whatever is painted behind the element. To use this property, you’ll need to add some level of transparency to your element, whether by setting no background, using an RGBA value, or applying opacity.
Creating a Frosted Glass Effect
Let’s start with a semi-transparent white background and apply a blur filter to achieve the frosted glass effect:
With some clever positioning, you can achieve stunning results:
Making it Safe for Other Browsers
While backdrop-filter is now supported by Chrome and Chromium-based browsers, we still need to ensure our code is compatible with Firefox and other browsers. Fortunately, any browser that doesn’t understand the backdrop-filter property will simply ignore it. However, in some cases, you may want to provide a different style for browsers that don’t support this property. This is where the @supports query comes in handy.
Beyond Frosted Glass
The backdrop-filter property is not limited to just creating a frosted glass effect. You can apply a wide range of filters, including:
- Blur
- Brightness
- Contrast
- Grayscale
- Hue-rotate
- Invert
- Opacity
- Saturate
- Sepia
You can even combine these filters to create advanced effects. For example, to recreate the Walden effect, you can use:
More Exciting Features in Chrome 76
The backdrop-filter property is just one of many exciting improvements in Chrome 76. Other notable features include support for the prefers-color-scheme media query, a new button in the omnibar to simplify PWA installation, and updates to numerous APKs.