The backdrop-filter CSS property has been unprefixed

A redesign of the Adobe Creative Cloud app using glassmorphism. The window is semi-transparent and shows the background underneath in blurred fashion. It has a side panel with the categories: apps, categories, fonts, and resource links. The central area shows all the apps installed. The design is very eye catching.

The backdrop-filter CSS property required a prefix [1] in Safari since forever, well 2015 to be more precise. You had to use -webkit-backdrop-filter just for Safari’s sake. Starting in Safari 18 beta, you don’t need the prefix! 🤗

Mostly you don’t need to pay attention to prefixes, they affect only a small portion of CSS properties nowadays. But occasionaly, they can trip you up! That is the case with the backdrop-filter property. Its adoption has been staggered. Support was added to Chrome in 2019 and Firefox in 2022, and they did not require a prefix. This is why prefixes can be easily overlooked!

Screenshot of the caniuse table for backdrop-filter property. The property is available in Firefox (2022) and Chrome (2019) unprefixed. It is available in safari as a unprefixed property since June 2024 as a beta release
Can I Use data - The property is only available unprefixed in Safari since June 2024, currently in version 18 beta.

Safari has also stated that it has improved the implementation of the property, and boosted its cross-browser interoperability. You should be able to use this property with no caveats going forward soon.

Where is backdrop-filter used?

If you are not familiar with backdrop-filter, it is having a moment with the glassmorphism trend. This is maybe why it has caught the attention of Apple again!

There are even dedicated generators such as the aptly named Glassmorphism CSS Generator that spit out a CSS snippet with the property. If you have used that generator, you are lucky because it includes the prefixed version of the property for you, so you avoided a Safari mishap!

Glassmorphism CSS generator

A beautiful example of its usage is Aysenur Turk’s redesign of the Adobe Creative Cloud app.

There are other use cases for backdrop-filter, but that is a topic for another day!

Final words

Trimming the technical debt of the “web platform” is progress. I think that unprefixing properties often goes unnoticed and is underappreciated. I appreciate it! Kudos to Safari for doing this work!

You should be able to use backdrop-filter with no caveats going forward soon! 🙏

  1. Browser vendors used to add prefixes to experimental or nonstandard CSS properties to enable developers to experiment with new ideas. It led to a raft of issues. Thankfully, browser vendors moved from “prefixing”, favouring feature flags inside the browser settings instead. However, there are still properties that were never unprefixed! ↩︎