App developer

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) {
	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.