Stuart Breckenridge

Blur with Backdrop Filter

I’ve added an iOS 7+ translucency effect—blur, in other words—to the masthead of the site. It’s been implemented using the Safari 9+ only backdrop-filter CSS style.

I’m using the @supports CSS at-rule to ensure it’s only applied when using a supported version of Safari:

@supports (-webkit-backdrop-filter:none) {
.selector 
	{ 
	background-color: rgba(255,255,255,0.5);
	-webkit-backdrop-filter: blur(10px);    
	} 
}

On non-Safari browsers, the translucency effect is not applied and a solid white background is used.


Supported by