The backdrop-filter CSS property has been unprefixed

The backdrop-filter CSS property required a prefix ¹ 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!

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!

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! ↩