Daniel Pietzsch

How to create a blurry status bar for PWAs on iOS

When you install a PWA on iOS (and iPadOS) via “Add to Home Screen”, you can make the status bar – i.e. the area at the top around the notch/dynamic island – transparent yet blurry (so that you can still read its infos like the time or battery status).

It’s a combination of using CSS’ backdrop-filter: blur() – to blur the content behind the status bar – and using mask with a linear-gradient and increasingly less opacity – so that the blur disappears towards the bottom and the element does not show a visible edge.

But first, you have to add the apple-mobile-web-app-status-bar-style meta tag to your HTML <head>, so that iOS knows that your PWA should have a translucent status bar at all:

<meta name="apple-mobile-web-app-capable" content="yes"><!-- I believe this is no longer necessary since iOS 26, but useful for older OSes -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><!-- this sets the status bar to fully transparent -->

In your CSS stylesheet, add a body::before pseudo element that styles the area behind the status bar. For the height, use the env(safe-area-inset-top) environment variable, which covers that exact area on iOS at the top behind the status bar.

/* Wrap it in a @supports rule so it only takes effect on devices that understand this */
@supports (padding: env(safe-area-inset-top)) {
  /* This is for PWA (on iOS), so that the status bar has a transparent yet blurry background. */
  body::before {
    content: '';
    z-index: 2; /* necessary to be above <audio> elements */
    position: fixed; /* position it fixed to it stays put at the top */
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top); /* i.e. the exact height of the status bar */
    backdrop-filter: blur(10px);
    /* Fully blur the top half, then up to 0.7 blur-opacity/strength for the next quarter, and at last, go from 0.7 to full transparent (i.e. no blur) at the very bottom. */
    mask: linear-gradient(to bottom, black, black 50%, rgba(0, 0, 0, 0.7) 75%, rgba(0, 0, 0, 0) 100%);
  }
}

You can tweak the linear-gradient values for the mask to find the effect you like. I am pretty happy with these values, which makes it look very similar to what iOS’ Maps app does, where this was inspired from.

Here’s what this looks like for FeedCity: