# Backdrop blur not working in Preview (Safari only)

**URL:** <https://forums.realmacsoftware.com/t/backdrop-blur-not-working-in-preview-safari-only/51107>\
**Category:** Elements\
**Created:** [September 17, 2025, 7:00pm UTC](https://forums.realmacsoftware.com/t/backdrop-blur-not-working-in-preview-safari-only/51107 "2025-09-17T19:00:53Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![AndyG](https://avatars.discourse-cdn.com/v4/letter/a/5f8ce5/32.png) [@AndyG](https://forums.realmacsoftware.com/u/AndyG)\
**Post date:** [September 17, 2025, 7:00pm UTC](https://forums.realmacsoftware.com/t/backdrop-blur-not-working-in-preview-safari-only/51107/1 "2025-09-17T19:00:53Z")

</div>

Just a heads up to anyone who might be struggling with this, but the backdrop blur setting in the Filters section of the Inspector for all the menu components doesn’t appear to work in Safari (v18.6 here). However, it works in the Elements editor and it works if I use Chrome for preview.

It’s not a bug in Elements - the correct tailwind classes are generated, as evidenced by the behaviour in Chrome. If anyone is using a different version of Safari and it works for you please let us know!

---

<div class="post-metadata">

**Author:** ![RussOggi255](https://avatars.discourse-cdn.com/v4/letter/r/ee7513/32.png) [@RussOggi255](https://forums.realmacsoftware.com/u/RussOggi255)\
**Post date:** [September 18, 2025, 10:32am UTC](https://forums.realmacsoftware.com/t/backdrop-blur-not-working-in-preview-safari-only/51107/2 "2025-09-18T10:32:23Z")

</div>

Is this what you mean for the menu? Both Safari 26 and Tech Preview Release 227

[http://phototank.russ-hore.co.uk/](http://phototank.russ-hore.co.uk/)

 ![Screenshot 2025-09-18 at 11.30.34](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/d/7/d7a5eef89b774276972936b442e10155c186050a.png)

> [@Backdrop blur not working in Preview (Safari only)](https://forums.realmacsoftware.com/t/backdrop-blur-not-working-in-preview-safari-only/51107):
>
> Just a heads up to anyone who might be struggling with this, but the backdrop blur setting in the Filters section of the Inspector for all the menu components doesn’t appear to work in Safari (v18.6 here). However, it works in the Elements editor and it works if I use Chrome for preview. It’s not a bug in Elements - the correct tailwind classes are generated, as evidenced by the behaviour in Chrome. If anyone is using a different version of Safari and it works for you please let us know!

---

<div class="post-metadata">

**Author:** ![AndyG](https://avatars.discourse-cdn.com/v4/letter/a/5f8ce5/32.png) [@AndyG](https://forums.realmacsoftware.com/u/AndyG)\
**Post date:** [September 18, 2025, 10:39am UTC](https://forums.realmacsoftware.com/t/backdrop-blur-not-working-in-preview-safari-only/51107/3 "2025-09-18T10:39:53Z")

</div>

Here’s what I see:

 ![Screenshot 2025-09-18 at 11.35.06](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/1/3/13d6ffb763860bf652f88aeb13f2804f0c77316c.jpeg)

It’s a bit difficult to tell with the level of opacity in your menu bar, but there’s no blur. If Safari 26 is ok, then no sweat. I’m stuck on Ventura (for other software compatibility reasons!) - hence the old-ish (but still supported and updated) Safari that I’m using.

---

<div class="post-metadata">

**Author:** ![AndyG](https://avatars.discourse-cdn.com/v4/letter/a/5f8ce5/32.png) [@AndyG](https://forums.realmacsoftware.com/u/AndyG)\
**Post date:** [September 18, 2025, 10:47am UTC](https://forums.realmacsoftware.com/t/backdrop-blur-not-working-in-preview-safari-only/51107/4 "2025-09-18T10:47:13Z")

</div>

So, 18.6 _is_ the latest stable version of Safari on MacOS (at least until the last few days when 26 came out across all platforms as part of the big rebrand).

---

<div class="post-metadata">

**Author:** ![RussOggi255](https://avatars.discourse-cdn.com/v4/letter/r/ee7513/32.png) [@RussOggi255](https://forums.realmacsoftware.com/u/RussOggi255)\
**Post date:** [September 18, 2025, 10:55am UTC](https://forums.realmacsoftware.com/t/backdrop-blur-not-working-in-preview-safari-only/51107/5 "2025-09-18T10:55:53Z")

</div>

Argh, I read your post as transparency. However I have set a blur and it works, Need a refresh in the browser.

 ![Screenshot 2025-09-18 at 11.55.28](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/b/5/b5135e7c525b6538826080670e0d5555129ad4e5.png)

---

<div class="post-metadata">

**Author:** ![PLM](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/plm/32/31094_2.png) [@PLM](https://forums.realmacsoftware.com/u/PLM)\
**Post date:** [September 18, 2025, 11:14am UTC](https://forums.realmacsoftware.com/t/backdrop-blur-not-working-in-preview-safari-only/51107/6 "2025-09-18T11:14:18Z")

</div>

Use https:// - I get a warning that the website may be fraudulent.

---

<div class="post-metadata">

**Author:** ![AndyG](https://avatars.discourse-cdn.com/v4/letter/a/5f8ce5/32.png) [@AndyG](https://forums.realmacsoftware.com/u/AndyG)\
**Post date:** [September 18, 2025, 11:16am UTC](https://forums.realmacsoftware.com/t/backdrop-blur-not-working-in-preview-safari-only/51107/7 "2025-09-18T11:16:36Z")

</div>

Not sure what’s happened now but this is what it looks like:

 ![Screenshot 2025-09-18 at 12.13.57](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/c/4/c47b8d08a3e811f57e0e01661025a70080dc89a2.jpeg)

No opacity, no blur!

I’m beginning to wonder if my Safari is broken…

---

<div class="post-metadata">

**Author:** ![RussOggi255](https://avatars.discourse-cdn.com/v4/letter/r/ee7513/32.png) [@RussOggi255](https://forums.realmacsoftware.com/u/RussOggi255)\
**Post date:** [September 18, 2025, 11:20am UTC](https://forums.realmacsoftware.com/t/backdrop-blur-not-working-in-preview-safari-only/51107/8 "2025-09-18T11:20:34Z")

</div>

Now fixed. I thought I had enabled & forced https

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [September 18, 2025, 5:03pm UTC](https://forums.realmacsoftware.com/t/backdrop-blur-not-working-in-preview-safari-only/51107/9 "2025-09-18T17:03:39Z")

</div>

Background blur is working, I’m wondering if you have the wrong setting enabled…

If you share your project here (via Elements Cloud) we can take a look for you.

---

<div class="post-metadata">

**Author:** ![AndyG](https://avatars.discourse-cdn.com/v4/letter/a/5f8ce5/32.png) [@AndyG](https://forums.realmacsoftware.com/u/AndyG)\
**Post date:** [September 18, 2025, 5:15pm UTC](https://forums.realmacsoftware.com/t/backdrop-blur-not-working-in-preview-safari-only/51107/10 "2025-09-18T17:15:12Z")

</div>

Hey @dan, not sure whether your comment was aimed at me or Russ… To clarify, backdrop blur _is_ working for me in Elements - the difference I’m seeing is that when previewed in Safari (18.6) it has no effect, whereas in Chrome it works. Also, Russ’s website menu is blurring for me in Chrome, but not in Safari.

Can anyone else try Safari 18.6 with Russ’s site and see whether it’s just my Safari that’s misbehaving or whether it’s a general Safari issue?

---

<div class="post-metadata">

**Author:** ![Fuellemann](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/fuellemann/32/22871_2.png) [@Fuellemann](https://forums.realmacsoftware.com/u/Fuellemann)\
**Post date:** [September 18, 2025, 6:13pm UTC](https://forums.realmacsoftware.com/t/backdrop-blur-not-working-in-preview-safari-only/51107/11 "2025-09-18T18:13:46Z")

</div>

> [@RussOggi255](#):
>
> [http://phototank.russ-hore.co.uk/](http://phototank.russ-hore.co.uk/)

Works finde for me and Safari 18.6:

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/5/8/58ae242f38f5d01097e169a2720cbdb91c3d4ffe.jpeg)

- Are you on Intel perhaps?
- Which extensions have you installed in Safari? Can you disable them and try again?

---

<div class="post-metadata">

**Author:** ![AndyG](https://avatars.discourse-cdn.com/v4/letter/a/5f8ce5/32.png) [@AndyG](https://forums.realmacsoftware.com/u/AndyG)\
**Post date:** [September 18, 2025, 6:38pm UTC](https://forums.realmacsoftware.com/t/backdrop-blur-not-working-in-preview-safari-only/51107/12 "2025-09-18T18:38:44Z")

</div>

No Safari extensions enabled, but I am on Intel (2020 MacBook Pro) and still running Ventura for various applications’ backwards compatibility reasons.

---

<div class="post-metadata">

**Author:** ![Fuellemann](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/fuellemann/32/22871_2.png) [@Fuellemann](https://forums.realmacsoftware.com/u/Fuellemann)\
**Post date:** [September 18, 2025, 7:06pm UTC](https://forums.realmacsoftware.com/t/backdrop-blur-not-working-in-preview-safari-only/51107/13 "2025-09-18T19:06:18Z")

</div>

I think there are some things Safari on Intel could not support, but I might be wrong here.

---

<div class="post-metadata">

**Author:** ![AndyG](https://avatars.discourse-cdn.com/v4/letter/a/5f8ce5/32.png) [@AndyG](https://forums.realmacsoftware.com/u/AndyG)\
**Post date:** [September 19, 2025, 9:37am UTC](https://forums.realmacsoftware.com/t/backdrop-blur-not-working-in-preview-safari-only/51107/14 "2025-09-19T09:37:08Z")

</div>

Ok - I got to the bottom of it 🙂

With the “Develop” menu visible (set “Show features for web developers” in the Settings Advanced tab) there are a number of feature flags available. There’s a whole bunch of disabled CSS features identified as either “Preview” or “Testable”. One of the latter category is “CSS Unprefixed Backdrop Filter”. If I turn this on, background blurs render correctly.

It sounds as though this feature is now turned on by default in the recently released Safari 26. However, there will be a lot of earlier versions out there for a while, so beware when using background blurs that some users might not get to appreciate some of the subtleties of your page design!

---

<div class="post-metadata">

**Author:** ![A.D.STUDIO](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/a.d.studio/32/9683_2.png) [@A.D.STUDIO](https://forums.realmacsoftware.com/u/A.D.STUDIO)\
**Post date:** [September 24, 2025, 8:47am UTC](https://forums.realmacsoftware.com/t/backdrop-blur-not-working-in-preview-safari-only/51107/15 "2025-09-24T08:47:08Z")

</div>

Thanks for finding that, it was also driving me crazy that Safari was not rendering blur while every other browser was.
