CSS backdrop-filter is Finally Unprefixed Across All Browsers

Safari 18 beta has now added un-prefixed support for the CSS backdrop-filter property (finally!). This was unveiled as a part of Apple's WWDC24.

Previously it was supported in Safari along with a prefix as -webkit-backdrop-filter.

backdrop-filter is a simple way of giving a nice UI to elements, inspired by blurred backgrounds on Apple devices. It opens up a lot of graphic possibilities. And for hardcore developers not having much of design sense, it is boon to making things look good by using just one CSS property.

Demo

HTML & CSS :

<div id="demo-box">
	<h3>This is a demo header</h3>
</div>

/* container has background image and child h3 is centered */
#demo-box {
	background-image: url('https://url-of-image');
	background-size: cover;
	align-items: center;
	justify-content: center;
	display: flex;
	height: 300px;
}

/* has background-filter */
#demo-box h3 {
	font-size: 40px;
	font-weight: 700;
	backdrop-filter: blur(10px);
	text-align: center;
	padding: 50px 100px;
	color: white;
}