# Apply blur to iOS status bar in PWA

DevFeed: [Apply blur to iOS status bar in PWA](<https://devfeed.tech/articles/apply-blur-to-ios-status-bar-in-pwa-37332.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/pwa-ios-status-bar-blur/>)

Author: Stanko

Published: 2025-04-11T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [PWA](<https://devfeed.tech/topics/pwa.md>), [CSS](<https://devfeed.tech/topics/css.md>), [iOS](<https://devfeed.tech/topics/ios.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [background](<https://devfeed.tech/tags/background.md>), [code](<https://devfeed.tech/tags/code.md>), [css](<https://devfeed.tech/tags/css.md>), [ios](<https://devfeed.tech/tags/ios.md>), [pwa](<https://devfeed.tech/tags/pwa.md>)

## AI overview

This tutorial describes a CSS-based workaround for applying a blurred overlay to the iOS status bar area in a standalone PWA. The workaround uses a fixed element positioned outside the viewport and backdrop filtering, but an August 2026 update states that it no longer works on recent iOS versions because of WebKit changes.

## Source excerpt

Update August 2026: This workaround no longer works on recent iOS versions. WebKit changed how standalone PWAs handle the status bar area. The fixed overlay positioned outside the viewport no longer renders under the status bar. I haven't found a workaround for this yet. If you find a solution please let me know. On my current project, I'm making a Progressive Web App (PWA) and I was really annoyed that the status bar on iOS was completely transparentAlthough the option is called black-translucent. When the content scrolls behind it, it blends with the status bar elements, and it doesn't look great. I couldn't find a native solution, so I tried using CSS instead. To my surprise, my idea worked on the first try. Here is my solution next to the default iOS status bar: After applying the CSS solutionDefault If you are impatient, feel free to jump to the demo. The solution # I think the solution is pretty simple - a fixed div that covers the status bar area and applies a blur effect to the background. But there's a catch, the div needs to be positioned outside of the viewport. Here is the code, HTML first: <div class="statusbar"></div> and the CSS: body { --bg-color: 186 230 253; background-color: rgb(var(--bg-color)); } .statusbar { position: fixed; left: 0; right: 0; top: -80px; height: 80px; overflow: hidden; z-index: 100; } .statusbar::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 150%; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background-color: rgb(var(--bg-color) / 0.6); } The CSS can be even simpler - we can remove the ::before element and just apply the blur to the .statusbar element itself. But this gives a nicer, more natural blur effect - check Josh Comeau's blog post in which he explains it in detail. Demo # You can check the live demo, just remember that you'll need an iOS device to see the effect. Not just that - for the effect to be visible, you'll need to add the app to your home screen. If you don't w