🧊 Alastair's article on Apple's hidden CSS magic

🍎 Apple’s Secret Sauce: -apple-visual-effect

Apple has quietly introduced a private CSS property called -apple-visual-effect, which enables Liquid Glass effects—a sleek, translucent UI style showcased at WWDC 2025. This is part of a broader design overhaul in iOS 26, reminiscent of the leap from skeuomorphism to flat design in iOS 7.

🔍 Where It Works (and Doesn’t)

• It doesn’t work in Safari or standard web browsers.

• It only works in WKWebView inside iOS apps, and even then, only if you toggle a private setting: useSystemAppearance in WKPreferences—which risks App Store rejection if used.

• The CSS looks like this:

.toolbar {

border-radius: 50%;

-apple-visual-effect: -apple-system-glass-material;

height: 75px;

width: 450px;

}

🧪 Feature Detection

Apple made it surprisingly elegant to conditionally apply the effect:

@supports (-apple-visual-effect: -apple-system-glass-material) {

.toolbar {

background: transparent;

-apple-visual-effect: -apple-system-glass-material;

}

}

🤔 Why It Matters

The author proposes the “Toupée Theory of In-App Webviews”: the best webviews are invisible. Apple likely uses this effect internally, and the fact that no one notices suggests seamless integration of web content into native UI.

It’s a fascinating peek into how Apple blurs the line between web and native—literally and figuratively.